使用JavaScript中的单选按钮更改图像
[英]Change image with radio buttons in javascript
问题描述
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. 我假设必须有一个相对简单的方法来执行此操作，因为这并不是一个令人难以置信的复杂更改，但是我对javascript很陌生，所以我可能做错了什么。 (This is my first time using StackOverflow, so I apologize if I'm asking a stupid question) （这是我第一次使用StackOverflow，所以如果我问一个愚蠢的问题，我深表歉意）
Here is my Javascript function 这是我的Javascript函数
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 *注意：单选按钮位于名为“ form1”的表单中，但是由于某些原因，当我包含标签时，代码无法正确显示
And my images are changed within this div 我的图像在这个div内发生了变化
<div id="cardLogo" height=75></div>
any help that anyone can provide would be much appreciated! 任何人都可以提供的任何帮助将不胜感激！
4 个解决方案
解决方案1
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 ? ) 而不是（当您的表单名称为form1时为什么要调用“测试”属性？）
document.test.creditCard.value
Secondly, to get node by ID, correct function name is getElementById ( look your MasterCard case ). 其次，要通过ID获取节点，正确的函数名称是getElementById（看一下MasterCard的情况）。
解决方案2
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: Le的意思是您拥有此form并且在表示图像名称的单选按钮上设置了data-*属性：
<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/ 比您可能会使用的类似： 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
}
解决方案3
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>
解决方案4
0 2014-10-13 18:47:02
The element (and its value) "document.test.creditCard.value" can't be found. 找不到元素（及其值）“ document.test.creditCard.value”。
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: 您必须通过Thibault Bach编写的方式来访问它，或者可以在函数调用中将单选按钮的值作为参数传递，如下所示：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.