I have two radio buttons, one for the colour red and one for the colour blue. The user selects one and the selected colour appears as the background colour. That's what I want, and I've managed to get this to work when it comes to changing an image but for some reason my code doesn't work.
When I select red, nothing happens, then I select blue and the page turns red. I must be doing something really stupid wrong.
<script>
function getColour() {
var rad = document.forms["Form2"]["ColourRad"];
var i, x;
for (i = 0; i < rad.length; i++) {
if (rad[i].checked) {
x = rad[i].value
}
}
changeColour(x);
}
function changeColour(colour) {
if (colour == "Blue") {
document.body.style.backround = "Blue"
} else if (colour == "Red") {
document.body.style.background = "Red"
}
}
</script>
<body>
<form name="Form2">Do you prefer the colour red or blue?
<input type="radio" name="ColourRad" onchange="getColour()" value="Blue" />Red
<input type="radio" name="ColourRad" onchange="getColour()" value="Red" />Blue
</form>
</body>
JSfiddle: http://ift.tt/19PfBfo
Aucun commentaire:
Enregistrer un commentaire