如何在JavaScript中訪問HTMLradio的值 -有解無憂

我正試圖為一個網站制作一個簡單的問卷調查，使用HTML radio和javascript。

<body> 
    < form class="questionForm" id="q1" data-question="1"> 
        <div>/span>
            <p>問題1</p> 
            <p>< input type="radio" value="a">/span>A. Rustgeving</p>A.
            <p>< input type="radio" value="b"> B. Zingeving</p>B.
            <p>< input type="radio" value="c">/span>C. Duurzaamheid</p>C.
            <p>< input type="radio" value="d"> D. Verzuiling</p>D.
            <p>< input type="radio" value="e">/span>E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button"/span> type="button" value="Volgende" onclick="check()"> 
    </form> 
...等

我特別希望能夠在我的JavaScript中操作/存盤這些值（這樣我就可以統計/計算答案的平均分）。我知道在點擊事件中運行 "檢查 "函式，我應該能夠訪問這些值，但我找不到確切的方法。

function check（）{
    var q1 = document.q1.value。
    document.write(q1)
}

這里的document.write()是用來除錯的，這樣我就可以看到我是否得到了一個/正確的值。目前沒有任何回傳。你能幫助我嗎？

編輯：

你建議的作業（放置 document.write(rb.value) 顯示你選擇的字母。但我的字典沒有保存增量。

完整的javascript：

const button = document.querySelector("#button">)
button.addEventListener("click", e =>  {
    const rb = document.querySelector('input[name="_exam_" ] :checked')。
    /document.write(rb.value);
    dict("rb.value") = dict("rb.value")   1;


})
//將a改成0。
var dict = {
    "a"。0,
    "b": 0,
    "c": 0,
    "d": 0,
    "e": 0,

};

$(document).ready(function () {
    //hide all questions
    $('.questionForm').hide() 。
    $('#results').hide()。
    //顯示第一個問題。
    $('#q1').show()。

    $('#q1 #button').click(function () {
        $('.questionForm').hide() 。
        $('#q2').show()。
        return false。
    });

    $('#q2 #button').click(function () {
        $('.questionForm').hide() 。
        $('#q3').show()。
        return false。
    });

    $('#q3 #button').click(function () {
        $('.questionForm').hide() 。
        $('#q4').show() 。
        return false。
    });

    $('#q4 #button').click(function () {
        $('.questionForm').hide() 。
        $('#q5').show()。
        return false。
    });

    $('#q5 #button').click(function () {
        $('.questionForm').hide()。
        $('#results').show()。
        /document.write('0');



        return false。
    });

});

和我的HTML

<!DOCTYPE html> 
<html lang="en"> 

<head>/span>
    <meta charset="UTF-8">/span>
    < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
    <link rel=" stylesheet" href="STYLE. CSS">
    <title>Document</title> 
</head> 

<body> 
    < form class="questionForm" id="q1" data-question="1"> 
        <div>/span>
            <p>問題1</p> 
            <p>< input type="radio" name="_exam_" value="a"/span>> A. Rustgeving</p>A.
            <p>< input type="radio" name="_exam_" value="b"/span>> B. Zingeving</p>B.
            <p>< input type="radio" name="_exam_" value="c"/span>> C. Duurzaamheid</p>C.
            <p>< input type="radio" name="_exam_" value="d"/span>> D. Verzuiling</p>D.
            <p>< input type="radio" name="_exam_" value="e"/span>> E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button" type="button" value="Volgende"> 
    </form> 

    < form class="questionForm" id="q2" data-question="2"> 
        <div>/span>
            <p>問題 2</p>
            <p>< input type="radio" name="_exam_" value="a"/span>> A. Rustgeving</p>A.
            <p>< input type="radio" name="_exam_" value="b"/span>> B. Zingeving</p>B.
            <p>< input type="radio" name="_exam_" value="c"/span>> C. Duurzaamheid</p>C.
            <p>< input type="radio" name="_exam_" value="d"/span>> D. Verzuiling</p>D.
            <p>< input type="radio" name="_exam_" value="e"/span>> E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button" type="button" value="Volgende"> 
    </form> 

    < form class="questionForm" id="q3" data-question="3"> 
        <div>/span>
            <p>問題3</p> 
            <p>< input type="radio" name="_exam_" value="a"/span>> A. Rustgeving</p>A.
            <p>< input type="radio" name="_exam_" value="b"/span>> B. Zingeving</p>B.
            <p>< input type="radio" name="_exam_" value="c"/span>> C. Duurzaamheid</p>C.
            <p>< input type="radio" name="_exam_" value="d"/span>> D. Verzuiling</p>D.
            <p>< input type="radio" name="_exam_" value="e"/span>> E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button" type="button" value="Volgende"> 
    </form> 

    < form class="questionForm" id="q4" data-question="4"> 
        <div>/span>
            <p>問題4</p>/span>
            <p>< input type="radio" name="_exam_" value="a"/span>> A. Rustgeving</p>A.
            <p>< input type="radio" name="_exam_" value="b"/span>> B. Zingeving</p>B.
            <p>< input type="radio" name="_exam_" value="c"/span>> C. Duurzaamheid</p>C.
            <p>< input type="radio" name="_exam_" value="d"/span>> D. Verzuiling</p>D.
            <p>< input type="radio" name="_exam_" value="e"/span>> E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button" type="button" value="Volgende"> 
    </form> 

    < form class="questionForm" id="q5" data-question="5" > 
        <div> 
            <p>問題5</p> 
            <p>< input type="radio" name="_exam_" value="a"/span>> A. Rustgeving</p>A.
            <p>< input type="radio" name="_exam_" value="b"/span>> B. Zingeving</p>B.
            <p>< input type="radio" name="_exam_" value="c"/span>> C. Duurzaamheid</p>C.
            <p>< input type="radio" name="_exam_" value="d"/span>> D. Verzuiling</p>D.
            <p>< input type="radio" name="_exam_" value="e"/span>> E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button" type="button" value="Volgende"> 
    </form> 


    < form class="questionForm" id="results" data-question="6" > 
        <p>這里是你的結果</p> 
    </form>/span>
    </div>/span>
    <script src="jquery. js">/span></script>
    <script src="quiz. js"></script>>
</body> 

</html>

uj5u.com熱心網友回復：

1)你應該在每個radio按鈕上添加name屬性，如：

<p>/span>< input type="radio" name? attr">name="_exam_" value="a"/span>> A. Rustgeving</p>A.

2)你可以得到checked單選按鈕的值

const rb = document. querySelector( 'input[name="_exam_"]:checked' ) 。
console.log( rb.value ) 。

。

const button = document. querySelector("#button"/span>)
button.addEventListener("click", e =>  {
  const rb = document.querySelector('input[name="_exam_"]:checked') 。
  console.log（rb.value）。
})

< form class="questionForm" id="q1" data-question="1"> 
  <div>/span>
    <p>問題1</p>/span>
    <p>< input type="radio" name="_exam_" value="a"/span>> A. Rustgeving</p>A.
    <p>< input type="radio" name="_exam_" value="b"/span>> B. Zingeving</p>B.
    <p>< input type="radio" name="_exam_" value="c"/span>> C. Duurzaamheid</p>C.
    <p>< input type="radio" name="_exam_" value="d"/span>> D. Verzuiling</p>D.
    <p>< input type="radio" name="_exam_" value="e"/span>> E. Zorgzaamheid</p>E.
  </div>/span>
  < input id="button" type="button" value="Volgende"> 
</form>

uj5u.com熱心網友回復：

使用選擇器(#q1 input[type="radio"]:checked)/code>


。

 function check(/span>){
   var element = document.querySelector('#q1 input[type="radio"] :checked')        
 
 if(element){
   console.log(Element.value)
 }

}
 < form class="questionForm"/span> id="q1" data-question="1"> 
        <div>/span>
            <p>問題1</p>/span>
            <p>< input type="radio" value="a">/span>A. Rustgeving</p>A.
            <p>< input type="radio" value="b"> B. Zingeving</p>B.
            <p>< input type="radio" value="c">/span>C. Duurzaamheid</p>C.
            <p>< input type="radio" value="d"> D. Verzuiling</p>D.
            <p>< input type="radio" value="e">/span>E. Zorgzaamheid</p>E.
        </div>/span>
        < input id="button"/span> type="button" value="Volgende" onclick="check()"> 
    </form> 
<iframe name="sif2" sandbox="allow-form allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>


uj5u.com熱心網友回復：
看起來你應該使用這個：
 var q1 = document.getElementById('q1'/span>) 。

更多關于正確實施的資訊可以在這里找到。






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320720.html
      標籤：
      上一篇：ExcelVBA錨定按鈕
下一篇：動態設定焦點在墊子按鈕上不作業