基于选择显示图像的Javascript函数不起作用

我试图根据用户选择的颜色显示绿色、黄色或红色圆点图像。我的代码基于我发现的东西

由于某种原因，该功能不起作用。当前，当用户进行选择时，不会发生任何事情

var statusCode=document.getElementById（'statusCode'）；
var greenDot=document.getElementById（'greenDot'）；
var yellowDot=document.getElementById（'yellowDot'）；
var redDot=document.getElementById（'redDot'）；
函数myfunction（）{
如果（statusCode.value==“绿色”）{
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==‘红色’）{
greenDot.style.display='none'；
yellowDot.style.display='none'；
redDot.style.display='circle'；
}
}

绿色
黄色的
红色

我对您的代码做了一些修改：

• 更改读取选择值的方式（在第

  行中，让值=…

  ）

---

• 更改html

  代码中有一些错误
  
  下拉列表的事件处理程序是
  onchange
  myfunction
  区分大小写
  将可见点设置为显示
  块
  或其他值（）
  下面是一种使用CSS创建此状态点的方法，完全不需要任何图像：
  
  
  //获取对相关元素的引用
  const statusCode=document.getElementById（'statusCode'）；
  const dot=document.getElementById（'dot'）；
  //为选择菜单的更改事件注册事件处理程序
  statusCode.addEventListener（'change'，e=>{
  //删除所有现有的颜色类
  删除（'dot-red'，'dot-yellow'，'dot-green'）；
  //使用选择菜单的值应用正确的颜色类别
  add（`dot-${e.target.value}`）；
  });
  //手动触发事件一次以设置初始颜色
  statusCode.dispatchEvent（新事件（'change'））
  .dot{
  /*设置尺寸*/
  宽度：10px；
  高度：10px；
  /*使圆点圆（边长/2）*/
  边界半径：5px；
  /*设置默认颜色*/
  背景色：黑色；
  /*将点放在菜单旁边*/
  显示：内联块；
  /*应用灯光阴影以使低对比度颜色更可见*/
  长方体阴影：0 5px灰色；
  }
  点红{
  背景色：红色；
  }
  点黄{
  背景颜色：黄色；
  }
  点绿{
  背景色：石灰；
  }
  
  绿色
  黄色的
  红色
  想象有一天，你的同事要求你添加50（或N）个状态码
  
  复制粘贴
  if
  语句，每条52行，50次，手动命名应该隐藏的元素，这不是解决问题和编程的正确方法。
  
  有很多种方法，我将向您展示一种：
  
  
  不要使用HTML内联javascript，而是使用
  Element.addEventListener（）
  ——期待将JS放在一个地方，而不是在不同的地方分开（HTML和JS文件）
  为图像指定一个
  数据id
  属性，该属性的值与选项元素
  值
  相同
  使用
  Element.classList
  及其方法来
  remove（）
  或
  add（）
  类（参见CSS）
  
  
  以下内容现在适用于无限数量的元素：
  
  
  const status=document.querySelector（“#statusCode”）；
  const parent=document.querySelector（“#images”）；
  const allImg=parent.querySelectorAll（'[data id]'）；//把他们都抓起来！
  函数showImage（）{
  allImg.forEach（el=>el.classList.remove（'is-visible'）；//隐藏所有图像
  const img=parent.querySelector（`[data id=“${this.value}]”）`；//按数据id查找图像
  如果（img）{
  img.classList.add（'is-visible'）；//显示它（如果找到）
  }
  }
  statusCode.addEventListener（“更改”，显示图像）
  #图像[数据id]{
  显示：无；
  }
  #图像[数据id]。可见{
  显示：块；
  }
  
  -选择状态颜色-
  绿色
  黄色的
  红色
  display='circle'这样的东西是不存在的你有。您可能需要“内联块”或“块”；可能与我尝试过的onchange相同，在我的实际代码中，myFunction的大小写正确，不确定这里发生了什么。我不认为“圆圈”会显示出来，但我测试了它，它工作了，所以我就用它。谢谢你的帮助。通过这样的回答，人们可能会认为w3schools是一个值得学习的权威资源。他们已经并且仍然通过提供低质量和不充分的文档对编程社区造成了很大的伤害。他们甚至出售毫无价值的假文凭。谢谢你的解决方案！我和另一个去是因为我更熟悉它。我确实投了你一票，但我没有足够好的声誉来展示它。好吧，
  statusCode.value
  仍然更短，更容易记住。而且，我认为你想使用
  onchange
  作为
  元素。还有，为什么要使用内联JS。。。？在特殊情况下，可能会发出一个
  不安全内联
  标志，并期望分离关注点
  addEventListener
  会更好。@RokoC.Buljan您是对的。如果这是我的代码，我将编写完全不同的代码-但是OP可能是初学者，所以我只关注修复代码中的bug以使其工作（对原始代码的更改最少）-而不是重构它。我很高兴，在我的早期，当有人帮我重构代码时——为了加快我的学习速度，而不是重复一些基本的错误；）