Introducing a value in javascript to radio buttons
Question
I want my radio buttons to be checked according to the sign of the number that the user gives as an input. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script>
function func1(x, y){
var z = x + y
document.getElementById("Z").innerHTML = z;
var Sign1
if (z < 0) {
Sign1 = "pos";
}
else {
Sign1 = "neg";
}
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br>
<input type="radio" name="sign" value="pos" checked> positive
<input type="radio" name="sign" value="neg"> negative
<br><br>
</form>
<button type="button" onclick="func1(parseInt(document.getElementById('X').value),parseInt(document.getElementById('Y').value))">Try it</button>
</body>
</html>
Here according to the value of z. How should I introduce this value and the condition in javascript code the radio buttons?
2 answers
solution1
1 2015-02-27 21:33:21
Add this code to the end of your function:
var elements = document.getElementsByName("sign");
for(var i = 0; i < elements.length; i++) {
elements[i].checked = elements[i].value === Sign1;
}
This loops through all DOM elements with name "sign"--in your case these are all your radio buttons. If the value of the radio button matches your Sign1 variable, then check the radio button, otherwise mark it as unchecked.
I think your logical check for pos vs. neg is reversed, but I'm not sure about your exact intentions. You can see a runnable example in the snippet below.
function func1(x, y){ var z = x + y document.getElementById("Z").innerHTML = z; var Sign1; if (z < 0) { Sign1 = "pos"; } else { Sign1 = "neg"; } var elements = document.getElementsByName("sign"); for(var i = 0; i < elements.length; i++) { elements[i].checked = elements[i].value === Sign1; } }
<form > first input:<br> <input id="Y" type="text" y="Y" value=85> <br> second input:<br> <input id="X" type="text" x="X" value=15> <br> The Answer:<br> <input id="Z" type="text" z="Z" > <br> <input type="radio" name="sign" value="pos" checked> positive <input type="radio" name="sign" value="neg"> negative <br><br> </form> <button type="button" onclick="func1(parseInt(document.getElementById('X').value),parseInt(document.getElementById('Y').value))">Try it</button>
solution2
1 ACCPTED 2015-02-27 21:43:09
You can do something like this:
var func1 = function (){ var x, y, z; x= Number(document.getElementById("X").value); y= Number(document.getElementById("Y").value); z= x + y; document.getElementById("Z").value = z; if (z < 0) { document.getElementById("neg").checked=true; } else { document.getElementById("pos").checked=true; } }
<html> <head> <title>Untitled Document</title> </head> <body> <form> first input:<br> <input id="Y" type="text" value=85> <br> second input:<br> <input id="X" type="text" value=15> <br> The Answer:<br> <input id="Z" type="text" > <input type="radio" name="sign" id="pos"> positive <input type="radio" name="sign" id="neg"> negative <br> <button type="button" onclick="func1()">Try it</button> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.