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