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>
Advertisement
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>