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，而不是这么多条件。

＆＃13;

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();

＆＃13;

<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>

＆＃13;

如果所有图片网址都遵循相同的模式，请考虑

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

document.getElementById与您标记中的ID相关，您将其指向图像标记的替代名称。您也可以在括号内指定语句;

if (document.getElementById('select1').value == 'Red'){} <-- Here
document.getElementById('car picture').src ='image/Red.jpg';

到

if (document.getElementById('select1').value == 'Red'){
document.getElementById('car picture').src ='image/Red.jpg';
}

希望有所帮助

编辑：在您的问题下面的两条评论之后发布，两者都很好地解释了它

无法获得更改图片工作的功能

2 个答案: