javascript - 在 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 时为什么要调用“test”属性？)

document.test.creditCard.value

其次，要通过ID获取节点，正确的函数名称是getElementById(看看你的MasterCard卡盒)。