我已经将代码更新到这仍然似乎不起作用我已经验证了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>
答案 0 :(得分:1)
多个问题:
id
无法包含空格id
id
附加到html中的错误元素checkcolor
,但将该函数定义为color
。if
条件。
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';
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;
答案 1 :(得分:0)
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';
}
希望有所帮助
编辑:在您的问题下面的两条评论之后发布,两者都很好地解释了它