圖片來源更改取決於選擇的選項

Question

我解決了問題。我只是刪除了VAR iimg並添加到功能

document.getElementByID("compareimg1").src = "../images/galaxy_s4.png"; 

form標籤：

<form> 
      <select id="select1" onchange="func1()"> 
       <option disabled selected value="choose1"> 
        CHOOSE 
       </option> 
       <option value="i2g" id="i2g"> 
        iPhone 2g 
       </option> 
      </select> 
     </form> 

表標籤：

<table id="comparetable1" class="ib5" border="1"> 
      <tr> 
       <td id="logotd"> 
        <img src="../images/logo.png" id="logoimg" /> 
       </td> 
       <td id="compareimg1td"> 
        <img id="compareimg1" /> 
       </td> 
       <td id="compareimg2td"> 
        <img src="../images/galaxy_s.png" id="compareimg2" /> 
       </td> 
      </tr> 
     </table> 

和腳本：

<script> 
      var ip2g = document.getElementById("i2g"); 
      var iimg = document.getElementById("compareimg1").src; 
      function func1(){ 
       if (ip2g.selected === true){ 
        iimg = "../images/galaxy_s4.png"; 
       } 
      } 
     </script> 

問題是，當我選擇一個opti從下拉菜單中，它不會在表格中加載圖像。

Answer 1

的問題是，typeof iimg是string，所以更新iimg不會改變圖像的src（only objects are passed by reference）。

因此，你需要：

var ip2g = document.getElementById("i2g"); 
var iimg = document.getElementById("compareimg1"); 
function func1(){ 
    if (ip2g.selected === true){ 
     iimg.src = "../images/galaxy_s4.png"; 
    } 
} 

Answer 2

如何比較選擇值，改變SRC這樣嗎？

var iimg = document.getElementById("compareimg1"); 

function func1(){ 
    if (document.getElementById("select1").value == "i2g"){ 
     iimg.src = "../images/galaxy_s4.png"; 
    } 
}