通过单选按钮更改使用JavaScript显示的图像

我的网站设置如下：

<h1 class="testTitle"> Letter Height</h1>

<h2 class="testIns">Press the buttons to make it shorter or taller!</h2>  

<div id="testBox">

    <img src="images/height/heightMid.gif"> 

</div>

<form method="get" action="width.php" class="testAns" id="heightAns">
<input type="radio" name="height" value="short" onchange="ChangeDisplay();">-25%
<input type="radio" name="height" value="mid" onchange="ChangeDisplay();">normal
<input type="radio" name="height" value="tall" onchange="ChangeDisplay();">+25%

<br>

<h2 class="confirm">Does this look good?  If so, please click the "Submit" button.</h2>

<span class="submit"><input type="submit"></span>
</form>

我有一个JavaScript函数，它应该根据所选的单选按钮在中更改图像：

function ChangeDisplay(){
    switch(document.test.field.value){
       case "short":
         document.getElementById("testBox").innerHTML = "<img src='images/height/heightMinus25.gif'>";
         break;
       case "mid":
          document.getElementById("testBox").innerHTML = "<img src='images/height/heightMid.gif'>";
          break;
       case "tall":
          document.getElementById("testBox").innerHTML = "<img src='images/height/heightPlus25.gif'>";
          break;

    }
  }

---

但是，当我选择按钮时，显示不会改变。任何帮助都将不胜感激。

在您的情况下，您应该获取单选按钮组的值，如下所示：

---

document.forms[0].height.value

另一种方法是使用JavaScript更改背景图像。下面是一个例子：

HTML

JAVASCRIPT

  function ClickMe () {
  if (document.getElementById("imgBtn").checked == true) {

document.getElementByIdimgCont.style.backgroundImage=url }

---

尝试更改为以下内容：

onclick="ChangeDisplay(this.value);"

及

---

如何选择document.test.field.value？请问document.test.field.value位是从哪里来的？您的表单不是“测试”，您的一系列单选按钮是“高度”。@user3452790您能告诉我们您的问题是否有答案吗？如果是，请接受答案。如果没有，请告诉我们情况。@AbuSulaiman Yep，就是他干的！我只需要将其更改为实际值。谢谢各位。

  function ClickMe () {
  if (document.getElementById("imgBtn").checked == true) {

  }

onclick="ChangeDisplay(this.value);"

function ChangeDisplay(val){
    switch(val){ ...
    ...