这应该相当简单，但它不起作用，而且我没有看到它。我试图通过调用 displayImage 函数的 onchange 方法来更改我的图像。我有什么想法吗？
<html>
<head>
<title>Select Image</title>
<script type="text/javascript">
function displayImage() {
var image = document.getElementById("canvas");
var newImage = image.option[image.selectedIndex].value;
}
</script>
</head>
<body>
<form name="controls">
<img id="canvas" src="pictures/fire1.jpg" />
<select name="imageList" onchange="displayImage();">
<option value="pictures/fire1.jpg">Fire 1</option>
<option value="pictures/fire2.jpg">Fire 2</option>
<option value="pictures/fire3.jpg">Fire 3</option>
<option value="pictures/fire4.jpg">Fire 4</option>
</select>
</form>
</body>
</html>
最佳答案
如果您想根据下拉列表的值更改 Canvas 元素的图像，请使用类似以下内容的内容:
<html>
<head>
<title>Select Image</title>
<script type="text/javascript">
function displayImage(elem) {
var image = document.getElementById("canvas");
image.src = elem.value;
}
</script>
</head>
<body>
<form name="controls">
<img id="canvas" src="pictures/fire1.jpg" />
<select name="imageList" onchange="displayImage(this);">
<option value="pictures/fire1.jpg">Fire 1</option>
<option value="pictures/fire2.jpg">Fire 2</option>
<option value="pictures/fire3.jpg">Fire 3</option>
<option value="pictures/fire4.jpg">Fire 4</option>
</select>
</form>
</body>
</html>
将 this 添加到函数调用中并修改函数本身。
关于Javascript - onchange 图像更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25949445/