javascript - 无法获取更改图片的功能来工作

Question

我已经更新了代码，这似乎仍然不起作用我已经验证了 js 文件是否正确指向，但是当我单击任何选项时，图片拒绝更新。

这是我的代码:

function color() {
  if (document.getElementById('carcolor').value == 'Red') {
    document.getElementById('car_pic').src = 'image/Red.jpg';
  }
  if (document.getElementById('carcolor').value == 'Blue') {
    document.getElementById('car_pic').src = 'image/BLue.jpg';
  }
  if (document.getElementById('carcolor').value == 'Silver') {
    document.getElementById('car_pic').src = 'image/Silver.jpg';
  }
  if (document.getElementById('carcolor').value == 'White') {
    document.getElementById('ccar_pic').src = 'image/White.jpg';
  }
  if (document.getElementById('carcolor').value == 'Black') {
    document.getElementById('car_pic').src = 'image/Black.jpg';
  }
}
checkcolor();

<div id="select1">
  <h1>Choose A Color</h1>
  <select name="color" size="5" id="carcolor">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Silver">Silver</option>
    <option value="White">White</option>
    <option value="Black">Black</option>
  </select>
  <img src="" alt="car picture" id="car_pic">
</div>

Answer 1

多个问题:

• id 不能包含空格
• 您在 JS 中使用了错误的 id
• 您将 id 附加到 html 中的错误元素
• 您正在调用 checkcolor，但将该函数定义为 color。
• 最好避免内联事件处理程序
• 避免多次获取相同的 DOM 元素，最好将其存储在变量中
• 您使用 if 条件的方式是错误的。
• 您可以使用一个对象来代替如此多的条件，该对象在给定选定值的情况下提供图像的 URL。

var sel = document.getElementById('select1'),
    img = document.getElementById('car_pic'),
    imgURLs = {
      Red: 'image/Red.jpg',
      Blue: 'image/Blue.jpg',
      Silver: 'image/Silver.jpg',
      White: 'image/White.jpg',
      Black: 'image/Black.jpg'
    };
function checkcolor() {
  img.src = imgURLs[sel.value];
}
sel.onchange = checkcolor;
checkcolor();

<div>
  <h1>Choose A Color</h1>
  <select name="color" size="5" id="select1">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Silver">Silver</option>
    <option value="White">White</option>
    <option value="Black">Black</option>
  </select>
  <img src="" alt="car picture" id="car_pic">
</div>

如果所有图像 URL 都遵循相同的模式，请考虑

img.src = 'image/' + sel.value + '.jpg';

var sel = document.getElementById('select1'),
    img = document.getElementById('car_pic');
function checkcolor() {
  img.src = 'image/' + sel.value + '.jpg';
}
sel.onchange = checkcolor;
checkcolor();

<div>
  <h1>Choose A Color</h1>
  <select name="color" size="5" id="select1">
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Silver">Silver</option>
    <option value="White">White</option>
    <option value="Black">Black</option>
  </select>
  <img src="" alt="car picture" id="car_pic">
</div>