What is the Error in changing Background Color in HTML using JavaScript and radio input
Question
<!-- What is the error ? -->
<!doctype html>
<html>
<head>
<title>JS 5</title>
<script type="text/javascript">
//javascript function to change color according to input
function changeCol(){
var x=document.getElementById("col").value;
if(x=="red"){
document.bgColor="red";
}
else if(x=="green"){
document.bgColor="green";
}
else{
document.bgColor=yellow";
}
}
</script>
</head>
<body>
<h1> BODY </h1>
<form>
<fieldset>
<legend>Choose One</legend>
<input type="radio" id="col" value="red">Red<br>
<input type="radio" id="col" value="green">Green<br>
<button id="x" onClick="changeCol()">Change</button>
</fieldset>
</form>
</body>
</html>
Not able to get the error. It seems everything is fine :( The function changeCol should change the color as per the selection of radio input. But its not doing anything.
2 answers
solution1
0 2015-02-12 17:43:40
You shoudn't have 2 elements with the same ID.
function changeCol(){
var x1=document.getElementById("col1");
var x2=document.getElementById("col2");
if(x1.checked){
document.bgColor="red";
}
else if(x2.checked){
document.bgColor="green";
}
else{
document.bgColor=yellow";
}
}
and
<input type="radio" id="col1" value="red">Red<br>
<input type="radio" id="col2" value="green">Green<br>
solution2
0 2015-02-12 17:47:36
You have a syntax error here, so the Javascript code won't start at all:
document.bgColor=yellow";
It should be:
document.bgColor="yellow";
Once you get it running, you will see that it only changes the color to red, regardless of what you choose. The id should be unique in the page. When you have duplicates, the getElementById will only get you the first element.
Still, getting multiple elements doesn't help you if you just look at the value property. That won't change for a radio button regardless if it's selected or not. You should use the checked property to detect that.
First give the radio buttons different id's:
<input type="radio" id="red" value="red">Red<br>
<input type="radio" id="green" value="green">Green<br>
Now you can check the state of each radio button:
function changeCol() {
var red = document.getElementById("red");
var green = document.getElementById("green");
if (red.checked) {
document.bgColor = "red";
} else if (green.checked) {
document.bgColor = "green";
} else {
document.bgColor = "yellow";
}
}
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.