Thought process....
radio buttons mean a form. Give it a name and id so I can reference it. I want the display to change when a radio button is clicked. I can add an 'onclick' handler to each radio button, but I think I will just add one to the form.
HTML:
<form id="theform" name="theform" onclick='test();'>
</form>
Ok, now add some radio buttons...Groups of two, a group having the same name (no ids here, ids have to be unique). There is no quick way to see the value of the checked button of a group, like bit01.value , so the 'value' attribute is more for documentation than programming.
HTML:
<form id="theform" name="theform" onclick='test();'>
<input type="radio" name="bit01" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit01" value="1" /> 1
<hr>
<input type="radio" name="bit02" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit02" value="1" /> 1
<hr>
<input type="radio" name="bit03" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit03" value="1" /> 1
<hr>
<input type="radio" name="bit04" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit04" value="1" /> 1
</form>
Now to the function test().
Javascript can access the form by 'document.theform' . You can then look at individual radio button groups by looking at 'document.theform.bit01' , etc. But javascript can also access all the elements of a form by using 'document.theform.elements' . If the form only has radio buttons, this is a list of the buttons, in order. So....
HTML:
function test(){
var binary_text_string = '' ; // string of 0's and 1's to build
var len = document.theform.elements.length ;
}
Since you know how many radio buttons you have, you could just set len to 8 in this case. But if you add more buttons, you have to remember to change it. This way you don't have to bother.
Now you want to check out buttons two by two. If the first is checked, the digit is 0. If the second is checked (same as the first not checked), the digit is 1. So I will use a 'for' loop, incrementing by 2 instead of the usual 1
HTML:
function test(){
var binary_text_string = '' ; // string of 0's and 1's to build
var len = document.theform.elements.length ;
for( i = 0; i < len ; i = i + 2 ){ // every 2 radio buttons
val = document.theform.elements[i].checked ? '0' : '1'
}
}
I used the ternary
test ? val1 : val2
operator which is more compact than an if-else construct.
So val is '0' or '1' depending on that radio button, now I add it to the output string...
HTML:
function test(){
var binary_text_string = '' ; // string of 0's and 1's to build
var len = document.theform.elements.length ;
for( i = 0; i < len ; i = i + 2 ){
val = document.theform.elements[i].checked ? '0' : '1'
binary_text_string = binary_text_string + val ;
}
}
Now the only thing left is to display the binary string. Easiest is to put a <span> element with an id as a target...
HTML:
<span id="binarydisplay" />0000</span>
And then insert the final value into the span... use document.getElementById() to grab the span and then use .innerHTML to insert the text...
HTML:
function test(){
var binary_text_string = '' ; // string of 0's and 1's to build
var len = document.theform.elements.length ;
for( i = 0; i < len ; i = i + 2 ){
val = document.theform.elements[i].checked ? '0' : '1'
binary_text_string = binary_text_string + val ;
}
document.getElementById('binarydisplay').innerHTML = binary_text_string ;
}
The whole thing...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScipt Test Page</title>
<script type="text/javascript">
function test(){
var binary_text_string = '' ;
var len = document.theform.elements.length ;
for( i = 0; i < len ; i = i + 2 ){
val = document.theform.elements[i].checked ? '0' : '1'
binary_text_string = binary_text_string + val ;
}
document.getElementById('binarydisplay').innerHTML = binary_text_string ;
}
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="theform" name="theform" onclick='test();'>
<input type="radio" name="bit01" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit01" value="1" /> 1
<hr>
<input type="radio" name="bit02" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit02" value="1" /> 1
<hr>
<input type="radio" name="bit03" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit03" value="1" /> 1
<hr>
<input type="radio" name="bit04" value="0" checked='checked'/> 0
<br />
<input type="radio" name="bit04" value="1" /> 1
<hr>
</form>
<span id="binarydisplay" />0000</span>
</body>
</html>
