Change image with radio buttons in javascript
Question
I have been looking for some time to find a way to have an image in a webpage change depending on what radio button in a form is selected, and every way that I've tried has been unsuccessful. I'm assuming that there must be a relatively easy way to do this, as it's not an incredibly complicated change to make, but I'm pretty new to javascript so I may just be doing something wrong. (This is my first time using StackOverflow, so I apologize if I'm asking a stupid question)
Here is my Javascript function
function changeCardLogo() {
switch(document.test.creditCard.value){
case "Visa":
document.getElementById("cardLogo").innerHTML= "<img height=75 src='Graphics/visaLogo.svg'>";
break;
case "MasterCard":
document.getElememtById("cardLogo").innerHTML= "<img height=75 src='Graphics/masterCardLogo.png'>";
break;
case "PayPal":
document.getElementById("cardLogo").innerHTML= "<img height=75 src='Graphics/paypalLogo.jpg'>";
break;
}
}
My radio buttons
<p><b>Payment Method</b><br>
<input type="radio" name="creditCard" value="Visa" checked onClick="changeCardLogo()"> Visa <br>
<input type="radio" name="creditCard" value="MasterCard" onClick="changeCardLogo()"> MasterCard <br>
<input type="radio" name="creditCard" value="PayPal" onClick="changeCardLogo()"> PayPal <br></p>
*Note: the radio buttons are within a form named "form1", but for some reason the code didn't display properly when I included the tags
And my images are changed within this div
<div id="cardLogo" height=75></div>
any help that anyone can provide would be much appreciated!
4 answers
solution1
2 2014-10-13 18:24:09
You have some errors. First , to get form data value, you need use:
document.forms["form1"].creditCard.value
instead of ( Why call "test" propertie when that your form name is form1 ? )
document.test.creditCard.value
Secondly, to get node by ID, correct function name is getElementById ( look your MasterCard case ).
solution2
1 2014-10-13 18:40:38
Le's say you have this form and you set some data-* attributes to your radio buttons representing the image name:
<form name="myForm">
<p><b>Payment Method</b><br>
<input data-img="visaLogo.svg" type="radio" name="creditCard" value="Visa" checked> Visa <br>
<input data-img="masterCardLogo.png" type="radio" name="creditCard" value="MasterCard"> MasterCard <br>
<input data-img="paypalLogo.jpg" type="radio" name="creditCard" value="PayPal"> PayPal <br></p>
<div id="cardLogo" height=75></div>
</form>
than you might use something like: http://jsfiddle.net/axnrtosa/2/
var cards = document.myForm.creditCard;
var logo = document.getElementById("cardLogo");
var event = new Event('change');
for(var i=0; i<cards.length; i++)
cards[i].addEventListener('change', changeCardLogo, false);
cards[0].dispatchEvent(event); // Trigger change
function changeCardLogo() {
var img = document.createElement('img');
img.src= "Graphics/"+ this.dataset.img;
logo.innerHTML = ""; // Remove old image
logo.appendChild( img ); // Append new image
}
solution3
1 2014-10-13 18:54:38
There are many ways to get what you want, another one is:
<html>
<script>
function changeImg(value){
var img = document.getElementById("img");
switch(value){
case "mastercard": img.src="MasterCard.jpg";break;
case "visa": img.src="Visa.jpg";break;
case "paypal": img.src="PayPal.jpg";break;
default: return false;
}
}
</script>
<body>
<img src="MasterCard.jpg" id="img"/>
MasterCard: <input type="radio" name="card" value="mastercard" checked onclick="changeImg(this.value)"/>
visa: <input type="radio" name="card" value="visa" onclick="changeImg(this.value)"/>
paypal: <input type="radio" name="card" value="paypal" onclick="changeImg(this.value)" onclick="changeImg(this.value)"/>
</body>
</html>
solution4
0 2014-10-13 18:47:02
The element (and its value) "document.test.creditCard.value" can't be found.
You have to access it by the way Thibault Bach wrote, or you can pass the value of the radio button as a parameter in the function call, like this:
<p><b>Payment Method</b><br>
<input type="radio" name="creditCard" value="Visa" checked onClick="changeCardLogo(this.value)"> Visa <br>
<input type="radio" name="creditCard" value="MasterCard" onClick="changeCardLogo(this.value)"> MasterCard <br>
<input type="radio" name="creditCard" value="PayPal" onClick="changeCardLogo(this.value)"> PayPal <br></p>
<div id="cardLogo" height="75"></div>
<script>
function changeCardLogo(v) {
var target = document.getElementById("cardLogo");
switch(v){
case "Visa":
target.innerHTML= "<img height=75 src='Graphics/visaLogo.svg'>";
break;
case "MasterCard":
target.innerHTML= "<img height=75 src='Graphics/mastercardLogo.png'>";
break;
case "PayPal":
target.innerHTML= "<img height=75 src='Graphics/paypalLogo.jpg'>";
break;
}
}
</script>
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.