gpt4 book ai didi

Javascript - onchange 图像更改

转载 作者:行者123 更新时间:2023-12-02 16:58:45 24 4
gpt4 key购买 nike

这应该相当简单,但它不起作用,而且我没有看到它。我试图通过调用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com