select onchangeの画像を変更する

Question

選択時に画像を変更したいと思います。すべてのことがどのように機能しているかを説明します。実際にはまず、選択した色に基づいてイメージを変更しています。私はコミュニティの助けを借りてその部分を果たしました。今度は、選択に基づいて画像を変更したいと思います。はいの場合は、同じ色の画像をカラーでロードします。

これは私が試したものであるが、そのここ:(

function collarChange(clickedOption) { 
 
     if (clickedOption.value == "Yes") 
 
     { 
 
      if (document.getElementById("libaasImage").src == "images/black.png") 
 
      { 
 
       document.getElementById("libaasImage").src = "images/black-collar.png"; 
 
      } 
 
     } 
 
}

<div class="col-md-3 colourWhite" onclick="ChangeLibaas(this)"></div> 
 
<div class="col-md-3 colourBlack" onclick="ChangeLibaas(this)"></div> 
 
<div class="col-md-3 colourGold" onclick="ChangeLibaas(this)"></div> 
 

 
<select onchange="collarChange(this)"> 
 
    <option value="select">Select..</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No">No</option> 
 
</select>

Answer 1

を働いていませんが、あなたのコードを作る助けるかもしれない作業フィドルで注目すべき2つのこと：。 1）あなたのcollarChange関数にイベントを渡して、選択した値にアクセスしました。 2）ifステートメントを変更してindexOfを確認しました。

https://jsfiddle.net/x0hrgj84/

HTML：

<select onchange="collarChange(event)"> 
    <option value="select">Select..</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option> 
</select> 
<img src="images/black.png" id="libaasImage"> 

Javascriptを：

collarChange = function (event) { 
    if (event.target.value == "Yes") 
    { 
    if (document.getElementById("libaasImage").src.indexOf("images/black.png") != -1) 
    { 
     document.getElementById("libaasImage").src = "images/black-collar.png"; 
    } 
    } 
}