如何使用javascript使用select標簽更改div的背景圖像？

Question

我如何使用select標簽更改div的背景圖像，所以當選擇某個選項時，背景會發生變化，這是我的代碼：

<div class="idcard" id="idcard-div"></div>
<div class="select-idcard" id="idcard-select">
        <p>Select Background Image</p>
        <select>
            <option id="idcard-option1" value="blue">Default/Blue</option>
            <option id="idcard-option2" value="red">Red</option>
            <option id="idcard-option3" value="purple">Purple</option>
            <option id="idcard-option4" value="green">Green</option>
        <select>
    </div>

JavaScript代碼：

var changeBgColor = function(){
        var idCardBg = document.getElementById("idcard-div");
        if(document.getElementById("idcard-option1").value === "blue"){
            idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
        }else if(document.getElementById("idcard-option2").value === "red"){
            idCardBg.style.backgroundImage = "url('redbg.jpg')";
        }else if(document.getElementById("idcard-option3").value === "purple"){
            idCardBg.style.backgroundImage = "url('purplebg.jpg')";
        }else if(document.getElementById("idcard-option3").value === "green"){
            idCardBg.style.backgroundImage = "url('greenbg.jpg')";
        }else{
            idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
        }
    };

..

changeBgColor();

Answer 1

您犯了幾個錯誤。

首先，id不匹配，您在div上使用了屬性class而不是id 。

另外，您應該獲得select元素的值，而不是其選項的值。

最后，您當然必須將事件附加到select元素。 我已經在下面的代碼段中用HTML完成了此操作，但是您也可以使用onchange屬性或addEventListener在JavaScript中完成此操作。

因此，除了一個很好的建議來遵循事件教程之外，我還建議您瀏覽一下瀏覽器中的開發人員工具。 它們包含一個JavaScript控制台，如果運行代碼，該控制台將顯示錯誤。 因此，一旦您附加了該事件，便可以查看控制台以查找其他錯誤。

無論如何，這次我為您做了。 以下是固定的代碼段。 我還使用該值設置背景色，因此您可以粗略地看到它的工作狀態，而無需訪問實際圖像。

 var changeBgColor = function(){ var idCardBg = document.getElementById("idcard"); idCardBg.style.backgroundImage = "url('tigerbg.jpg')"; if(document.getElementById("select-idcard").value === "blue"){ idCardBg.style.backgroundImage = "url('tigerbg.jpg')"; }else if(document.getElementById("select-idcard").value === "red"){ idCardBg.style.backgroundImage = "url('redbg.jpg')"; }else if(document.getElementById("select-idcard").value === "purple"){ idCardBg.style.backgroundImage = "url('purplebg.jpg')"; }else if(document.getElementById("select-idcard").value === "green"){ idCardBg.style.backgroundImage = "url('greenbg.jpg')"; }else{ idCardBg.style.backgroundImage = "url('tigerbg.jpg')"; } idCardBg.style.backgroundColor = document.getElementById("select-idcard").value; }; 

 <div id="idcard"> <p>Select Background Image</p> <select onchange="changeBgColor();" id="select-idcard"> <option id="idcard-option1" value="blue">Default/Blue</option> <option id="idcard-option2" value="red">Red</option> <option id="idcard-option3" value="purple">Purple</option> <option id="idcard-option4" value="green">Green</option> </select> </div> 

Answer 2

HTML更改

<select id="colorSelect" onchange="changeBgColor();">
  <option value="blue">blue</option>
  <option value="red">red</option>
</select>

JS更改（使用select.options數組及其值）

var changeBgColor = function(){
  var idCardBg = document.getElementById("idcard-select");
  var colorSelect = document.getElementById("colorSelect");
  switch (colorSelect.options[colorSelect.selectedIndex].value)
  {
    case 'blue': idCardBg.style.backgroundImage = "url('bluebg.jpg')"; break;
    case 'red': idCardBg.style.backgroundImage = "url('redbg.jpg')"; break;
    default:
      idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
    break;
  }
}