根据选择显示图像的 Javascript 函数不起作用

Question

我正在尝试根据用户选择的颜色显示绿色、黄色或红色的圆点图像。我的代码基于我在 this question 上找到的东西.

由于某种原因，该功能无法正常工作。目前，当用户进行选择时没有任何反应。

var statusCode = document.getElementById('statusCode');
var greenDot = document.getElementById('greenDot');
var yellowDot = document.getElementById('yellowDot');
var redDot = document.getElementById('redDot');

function myfunction() {
  if (statusCode.value == 'Green') {
    greenDot.style.display = 'circle';
    yellowDot.style.display = 'none';
    redDot.style.display = 'none';
  } 
  else if (statusCode.value == 'Yellow') {
    greenDot.style.display = 'none';
    yellowDot.style.display = 'circle';
    redDot.style.display = 'none';
  } 
  else if (statusCode.value == 'Red') {
    greenDot.style.display = 'none';
    yellowDot.style.display = 'none';
    redDot.style.display = 'circle';
  }
}

<select id="statusCode" onload="myFunction()">
  <option value="Green">Green</option>
  <option value="Yellow">Yellow</option>
  <option value="Red">Red</option>
</select>

<p>
  <img src="http://clipart-library.com/image_gallery/156788.png" style="display: none;" id="greenDot">
  <img src="http://www.clker.com/cliparts/o/b/y/x/Z/c/yellow-dot-md.png" style="display: none;" id="yellowDot">
  <img src="http://www.clker.com/cliparts/s/o/v/c/T/Y/red-dot-md.png" style="display:none;" id="redDot">
</p>

Answer 1

我稍微修改一下你的代码:

• 更改读取选择值的方式(在 let value =.... 行)
• 更改 html <select ... onload...至 oninput
• 改变 js myfunction至 myFunction (F 大写)
• js 的变化 style.display = 'circle'至 'block'
• 调用myFunction()在脚本底部初始化第一张图片
• 更改<img src=http://...至 https:// (但可能只有在 SO 中才需要)

var statusCode = document.getElementById('statusCode');
var greenDot = document.getElementById('greenDot');
var yellowDot = document.getElementById('yellowDot');
var redDot = document.getElementById('redDot');

function myFunction() {

    const value = statusCode.options[statusCode.selectedIndex].value

    if(value == "Green") {        
        greenDot.style.display = 'block';
        yellowDot.style.display = 'none';
        redDot.style.display = 'none';
    }
    else if(value == "Yellow"){
        greenDot.style.display = 'none';
        yellowDot.style.display = 'block';
        redDot.style.display = 'none';
    }
    else if(value == "Red"){
        greenDot.style.display = 'none';
        yellowDot.style.display = 'none';
        redDot.style.display = 'block';
    }
}

myFunction();

<select id="statusCode" onchange="myFunction()"> 
  <option value="Green">Green</option>
  <option value="Yellow">Yellow</option>
  <option value="Red">Red</option>
</select>

<p>    
  <img src="https://clipart-library.com/image_gallery/156788.png" style="display: none;" id="greenDot"/>
  <img src="https://www.clker.com/cliparts/o/b/y/x/Z/c/yellow-dot-md.png" style="display: none;" id="yellowDot"/>
  <img src="https://www.clker.com/cliparts/s/o/v/c/T/Y/red-dot-md.png" style="display:none;" id="redDot"/>
</p>