基于选择不工作的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()到init第一张图片
• 将<img src=http://...更改为https:// (但这可能是这里只需要的)

​

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>

​

Answer 2

代码中有几个错误

1. 下拉列表的事件处理程序是onchange。
2. myfunction区分大小写。
3. 将可见点设置为显示block或其他值(https://developer.mozilla.org/en-US/docs/Web/CSS/display)

Answer 3

下面是一种在没有任何图像的情况下创建状态点的方法，使用一些CSS：

​

// Get references to the relevant elements
const statusCode = document.getElementById('statusCode');
const dot = document.getElementById('dot');

// Register an event handler for the select menu’s change event
statusCode.addEventListener('change', e => {
  // Remove all existing color classes
  dot.classList.remove('dot-red', 'dot-yellow', 'dot-green');

  // Apply the correct color class using the value of the select menu
  dot.classList.add(`dot-${e.target.value}`);
});

// Manually trigger the event once to set the initial color
statusCode.dispatchEvent(new Event('change'));

.dot {
  /* Setup dimension */
  width: 10px;
  height: 10px;

  /* Make the dot round (side length / 2) */
  border-radius: 5px;

  /* Set a default color */
  background-color: black;

  /* Position the dot next to the menu */
  display: inline-block;

  /* Apply a light shadow to make low contrast colors more visible */
  box-shadow: 0 0 5px gray;
}

.dot-red {
  background-color: red;
}

.dot-yellow {
  background-color: yellow;
}

.dot-green {
  background-color: lime;
}

<select id="statusCode">
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
  <option value="red">Red</option>
</select>

<div id="dot" class="dot"></div>

​