Hi everyone,
I thought the following would be fairly simple to solve, but…no. Would appreciate pointers.
I have two sets of four radio buttons each. I want to get the values of the clicked buttons and then direct the user to a url based on which buttons they clicked.
So far, I’ve only been able to set up the two sets of buttons and get the values of the clicked buttons. (I started setting up a third function to evaluate the values returned from the first two functions, but couldn’t figure out how to get that to kick in after the first two. I’ve been working in Python, and Javascript is a little disorienting)
Thanks for any guidance!
<!DOCTYPE html>
<html>
<head><title>eventListenerLogic</title></head>
<body>
<p>One event listener for two functions.</p>
<div id="rad">
<input type="radio" name="top" value="1">One<br/>
<input type="radio" name="top" value="2">Two<br/>
<input type="radio" name="top" value="3">Three<br/>
<input type="radio" name="top" value="4">Four<br/>
<br>
<input type="radio" name="bottom" value="a">A<br/>
<input type="radio" name="bottom" value="b">B<br/>
<input type="radio" name="bottom" value="c">C<br/>
<input type="radio" name="bottom" value="d">D<br/>
<br>
</div>
<div id="doIt">
<button> click.</button></div><br/>
<br>
<div id="result1">What is your number?</div><br>
<div id="comment1"></div><br>
<div id="result2">What is your letter?</div><br>
<div id="comment2"></div><br>
<script>
function func1() {
var topp=document.getElementsByName('top')
for (i=0; i<topp.length; i++) {
if (topp[i].checked)
var toppy = topp[i].value;
}
if (toppy=="3"){
document.getElementById("comment1").innerHTML="Lucky 3!";
} else {
document.getElementById("comment1").innerHTML="That's a good choice."
}
return toppy;
}
function func2() {
var bottomm=document.getElementsByName('bottom')
for (i=0; i<bottomm.length; i++) {
if (bottomm[i].checked)
var bottommy = bottomm[i].value;
}
if (bottommy=="c") {
document.getElementById("comment2").innerHTML="See you!";
} else {
document.getElementById("comment2").innerHTML="OK!"
}
return bottommy;
}
document.getElementById("doIt").addEventListener("click", func1, true);
document.getElementById("doIt").addEventListener("click", func2, true);
</script>
</body>
</html>
.