在javascript中使用单选按钮更改图像答案

【问题标题】：Change image with radio buttons in javascript在javascript中使用单选按钮更改图像
【发布时间】：2014-10-13 18:11:46
【问题描述】：

我一直在寻找一种方法来改变网页中的图像，具体取决于选择了表单中的单选按钮，但我尝试过的每种方法都没有成功。我假设必须有一种相对简单的方法来做到这一点，因为这并不是一个非常复杂的改变，但我对 javascript 还是很陌生，所以我可能只是做错了什么。（这是我第一次使用 StackOverflow，所以如果我问了一个愚蠢的问题，我很抱歉）

这是我的 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;
    }
}

我的单选按钮

        <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>

*注意：单选按钮位于名为“form1”的表单中，但由于某种原因，当我包含标签时代码无法正确显示

而我的图片在 这个 div

内发生了变化

<div id="cardLogo" height=75></div>

任何人都可以提供任何帮助将不胜感激！

【问题讨论】：

对于初学者，“万事达卡”有一个错误（如果已复制和粘贴）：“document.getElememtById”。其次，通过更新 src 属性直接覆盖卡片徽标的图像标签可能更简单。 document.text.creditCard.value 中的值是多少？
creditCard的默认值为visa，感谢指出错字。我之前曾尝试直接更改 src 属性，但发现它仍然不起作用，尽管检查了几个小时的语法错误和拼写错误。

标签： javascript html radio-button

【解决方案1】：

你有一些错误。首先，要获取表单数据值，您需要使用：

document.forms["form1"].creditCard.value

而不是（当您的表单名称为 form1 时，为什么要调用“测试”属性？）

document.test.creditCard.value

其次，要通过 ID 获取节点，正确的函数名称是 getElementById（查看您的 MasterCard 案例）。

【讨论】：

【解决方案2】：

假设您有这个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>

你可能会使用类似的东西：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】：

有很多方法可以得到你想要的，另一种是：

<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】：

找不到元素（及其值）“document.test.creditCard.value”。

你必须按照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>

【讨论】：