通過單選按鈕更改使用JavaScript顯示的圖像

Question

我的網站設置如下：

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

    }
  }

但是，當我選擇按鈕時，顯示不會改變。 任何幫助將不勝感激。

Answer 1

在您的情況下，您應該這樣獲取單選按鈕組的值：

document.forms [0] .height.value

Answer 2

另一種方法是使用JavaScript更改背景圖像。 這是一個例子：

的HTML

<div id="imgCont"></div><P>
<input type="radio" id="imgBtn" onclick="ClickMe();">Click Me

的CSS

      #imgCont {
     background-image:  
      url('http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png');
      background-repeat: no-repeat;
    width: 200px;
  height: 200px;
 }

JAVASCRIPT

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

document.getElementById（“ imgCont”）。style.backgroundImage =“ url（ http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg ）”}

  }

Answer 3

嘗試更改為以下內容：

onclick="ChangeDisplay(this.value);"

和

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