使用JavaScript中的单选按钮更改图像

Question

我一直在寻找一些时间来找到一种方法来更改网页中的图像，具体取决于选择了表单中的哪个单选按钮，而我尝试过的每种方法均未成功。 我假设必须有一个相对简单的方法来执行此操作，因为这并不是一个令人难以置信的复杂更改，但是我对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>

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

Answer 1

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

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

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

document.test.creditCard.value

其次，要通过ID获取节点，正确的函数名称是getElementById（看一下MasterCard的情况）。

Answer 2

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>

比您可能会使用的类似： 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
}

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

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

使用JavaScript中的单选按钮更改图像

问题描述

4 个解决方案

解决方案1
2 2014-10-13 18:24:09

解决方案2
1 2014-10-13 18:40:38

解决方案3
1 2014-10-13 18:54:38

解决方案4
0 2014-10-13 18:47:02

使用JavaScript中的单选按钮更改图像

问题描述

4 个解决方案

解决方案1 2 2014-10-13 18:24:09

解决方案2 1 2014-10-13 18:40:38

解决方案3 1 2014-10-13 18:54:38

解决方案4 0 2014-10-13 18:47:02

解决方案1
2 2014-10-13 18:24:09

解决方案2
1 2014-10-13 18:40:38

解决方案3
1 2014-10-13 18:54:38

解决方案4
0 2014-10-13 18:47:02