How to access values of HTML radio in JavaScript-CodePudding

I am trying to make a simple questionaire for a website, using HTML radio and javascript. I am trying to access values from radio buttons i have implemented among the lines of:

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

I want specifically to be able to manipulate/store these values in my JavaScript (such that i can tally/average answer scores). I know that the on click event runs the "check" function where i should be able to access these values, yet i cannot find the exact method. Currently i am trying something among the lines of:

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

The document.write() here is used as debugging purposes such that i can see whether i got a / the right value. currently nothing is returned. Can you help me?

Edit:

It worked what you proposed (placing document.write(rb.value) shows the letter you picked. but my dictionairy does not save the increments. how can i make the code so it shows at the end what answers you picked ? for example ; AABDC

complete 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;


})
//changes the a to 0 
var dict = {
    "a": 0,
    "b": 0,
    "c": 0,
    "d": 0,
    "e": 0,

};

$(document).ready(function () {
    //hide all questions
    $('.questionForm').hide();
    $('#results').hide();
    //show first question 
    $('#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;
    });

});

and my HTML

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

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

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

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

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

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

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


    <form class="questionForm" id="results" data-question="6">
        <p> here are your results</p>
    </form>
    </div>
    <script src="jquery.js"></script>
    <script src="quiz.js"></script>
</body>

</html>

CodePudding user response：

1) You should add name property on each radio button as:

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

2) You can get the value of the checked radio button as

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

const button = document.querySelector("#button")
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>
    <p>Question 1</p>
    <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
    <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
    <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
    <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
    <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
  </div>
  <input id="button" type="button" value="Volgende">
</form>

CodePudding user response：

Use selector (#q1 input[type="radio"]:checked)

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

}

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

CodePudding user response：

It looks as though you should be using this:

var q1 = document.getElementById('q1');

More information on correct implementation can be found here.