Skip to content
Advertisement

Syntax for checking value of radio button

Iḿ trying to check for a value of a radio input with Javascript, here is an if statements in one the functions in my code:

 if (understanding1.value == yes ){
  document.getElementById("result1Y").innerHTML = 
  document.getElementById('name1').value;
}

I’m having trouble with the syntax of the if (understanding1.value == yes ) do …

Here is what my code is suppose to do:

The user inputs some text > the text has the id = “name1” The user selects one of the following options > yes; kind of; no The user clicks enter button > The function organizeUnderstanding1() is suppose to organize the input name1 into either result1H; result1M; result1E; depending on what they selected with the radio inputs

Here is the full version of my code:

 <div>
        <input type="text" id="name1">
    </div>

 <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" name="understanding1" value="yes" required>
        <label for="yes">yes</label><br>
        <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
        <label for="kinda">kind of</label><br>
        <input type="radio" id="no1" name="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();">Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p><span id="result1H"></span></p>
        <p>Here's what you said KIND OF to:</p>
        <p><span id="result1K"></p>  
        <p>Hereś what you said NO to:</p>
        <p><span id="result1Y"></span></p>
      </div>
    
    
      <script>
     
      
      
      function organizeUnderstanding1() {
     var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
              if (understanding1.value == yes ){
                 document.getElementById("result1Y").innerHTML =                        document.getElementById('name1').value;
              } else if (understanding1.value == kinda ){
                document.getElementById("result1K").innerHTML =                         document.getElementById('name1').value;
              } else if (understanding1.value == no ){
                document.getElementById("result1N").innerHTML =                         document.getElementById('name1').value;
              } else {
                break;
              }
       }
       
    
   
      </script>

Answer

You’re checking for variables which you never assigned instead of strings. You need to wrap quotes around each value you want to check the string equality.

 <div>
        <input type="text" id="name1">
    </div>

 <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" name="understanding1" value="yes" required>
        <label for="yes">yes</label><br>
        <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
        <label for="kinda">kind of</label><br>
        <input type="radio" id="no1" name="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick=organizeUnderstanding1()>Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p><span id="result1Y"></span></p>
        <p>Here's what you said KIND OF to:</p>
        <p><span id="result1K"></p>  
        <p>Hereś what you said NO to:</p>
        <p><span id="result1N"></span></p>
      </div>
    
    
      <script>
     
      
      
      function organizeUnderstanding1() {
     var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
              if (understanding1== 'yes' ){
                 document.getElementById("result1Y").innerHTML =                        document.getElementById('name1').value;
              } else if (understanding1 == 'kinda' ){
                document.getElementById("result1K").innerHTML =                         document.getElementById('name1').value;
              } else if (understanding1== 'no' ){
                document.getElementById("result1N").innerHTML =                         document.getElementById('name1').value;
              } else {
                break;
              }
       }
       
    
   
      </script>
Advertisement