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>

*注意：单选按钮位于名为＆＃34; form1＆＃34;的表单中，但由于某些原因，当我包含标记时代码没有正确显示

我的图片在此div

中更改

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

任何人都可以提供的帮助将非常感谢！

Answer 1

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

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

而不是（为什么在表单名称为form1时调用＆＃34; test＆＃34;属性？）

document.test.creditCard.value

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

Answer 2

Le's说你有这个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 个答案: