Rewrite radio_click.html to assign the event handler to the event property of th
ID: 3636598 • Letter: R
Question
Rewrite radio_click.html to assign the event handler to the event property of the button eleement. This requires the chosen color to be obtained from the value property of the button element rather than through the parameter - I' getting dom is null error - here's what I have so far:
HTML:
radio_click.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<!-- -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>radio_click.htm</title>
<!--Script for event handler -->
<script type = "text/javascript" src="radio_click2.js">
</script>
</head>
<body>
<h4>Pick a Color</h4>
<form id = "myform" action = "">
<p>
<label><input type = "radio" name = "colorButton"
value = "red"
id = "red" />
Red </label>
<br />
<label><input type = "radio" name = "colorButton"
value = "blue"
id = "blue"/>
Blue </label>
<br />
<label><input type = "radio" name = "colorButton"
value = "green"
id = "green"/>
Green </label>
<br />
<label><input type = "radio" name = "colorButton"
value = yellow"
id = "yellow"/>
Yellow </label>
<br />
<label><input type = "radio" name = "colorButton"
value = "orange"
id = "orange"/>
Orange </label>
</p>
</form>
<!--Sript for registering the event handler -->
<script type = "text/javascript" src =
"radio_click2reg.js">
</script>
</body>
</html>
1st js:
function colorChoice (color){
//put the DOM address of the elements array in a local variable
var dom = document.getElementById("myForm");
for (var index = 0; index < dom.colorButton.length;
index++) {
if (dom.colorButton[index].checked) {
color = dom.colorButton[index].value;
break;
}
}
switch (color) {
case 'red':
alert("Red is the color of Strawberries");
break;
case 'blue':
alert("Blue is the color of the Sky");
break;
case 'green':
alert("Green is the color of Grass");
break;
case 'yellow':
alert("A Banana is Yellow");
break;
case 'orange':
alert("A Basketball is Orange");
break;
}
}
2nd js:
var dom = document.getElementById("myForm");
dom.getElementByID["red"].onclick = colorChoice;
dom.getElementByID["blue"].onclick = colorChoice;
dom.getElementByID["green"].onclick = colorChoice;
dom.getElementByID["yellow"].onclick = colorChoice;
dom.getElementByID["orange"].onclick = colorChoice
Explanation / Answer
here i am combined both the javascript and html in same file and it works i had run it successfully . i don't know why you are calculatig color if you are passing it as an argument in that function . and also you have written a function js file but you are not calling it from your html file . so i also associate a onclick listener to radio button .
////////////code/////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<!-- -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>radio_click.htm</title>
<!--Script for event handler -->
<script type = "text/javascript">
function colorChoice (color){
switch (color) {
case 'red':
alert("Red is the color of Strawberries");
break;
case 'blue':
alert("Blue is the color of the Sky");
break;
case 'green':
alert("Green is the color of Grass");
break;
case 'yellow':
alert("A Banana is Yellow");
break;
case 'orange':
alert("A Basketball is Orange");
break;
}
}
</script>
</head>
<body>
<h4>Pick a Color</h4>
<form id = "myform" action = "">
<p>
<label><input type = "radio" name = "colorButton"
value = "red"
id = "red" />
Red </label>
<br />
<label><input type = "radio" name = "colorButton"
value = "blue"
id = "blue"/>
Blue </label>
<br />
<label><input type = "radio" name = "colorButton"
value = "green"
id = "green"/>
Green </label>
<br />
<label><input type = "radio" name = "colorButton"
value = yellow"
id = "yellow"/>
Yellow </label>
<br />
<label><input type = "radio" name = "colorButton"orange"
id = "orange"/>
Orange </label>
</p>
</form>
</body>
</html>
//////////////////////////////
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.