使用JavaScript结合下拉选框切换图片src失败求助

错误原因分析 #

• 错误使用$代替document：你的项目未引入框架，$不是浏览器内置对象，$.querySelector会直接报错，需使用原生document.querySelector。
• 给<option>绑定click事件不可靠：多数浏览器不会触发<option>的click事件，正确做法是监听<select>的change事件。
• 变量名拼写错误：trunOffOption里的trun是拼写错误，应为turn。

修正后的代码 #

HTML（无需修改） #

<img src="./images/bulboff.gif" class="bulb-image" alt="bulboff">
<select class="selectbox">
  <option value="Turn ON" class="bulb-on">Turn ON</option>
  <option value="Turn OFF" class="bulb-off">Turn OFF</option>
</select>

JavaScript #

// 获取图片和下拉选框元素
const bulbImage = document.querySelector(".bulb-image");
const selectBox = document.querySelector(".selectbox");

// 监听下拉选框的change事件
selectBox.addEventListener("change", function() {
  // 根据选中的value切换图片src
  if (this.value === "Turn ON") {
    bulbImage.src = "./images/bulbon.gif";
  } else if (this.value === "Turn OFF") {
    bulbImage.src = "./images/bulboff.gif";
  }
});

额外优化提示 #

• 直接修改src属性比setAttribute更简洁高效，原生DOM元素的src属性可直接赋值。
• 用对象映射简化条件判断，代码更简洁：

const bulbImage = document.querySelector(".bulb-image");
const selectBox = document.querySelector(".selectbox");

const srcMap = {
  "Turn ON": "./images/bulbon.gif",
  "Turn OFF": "./images/bulboff.gif"
};

selectBox.addEventListener("change", function() {
  bulbImage.src = srcMap[this.value];
});

内容的提问来源于stack exchange，提问作者fedora