Javascript-onchange image change

这应该是相当简单的，但它不工作，我没有看到它。我想通过调用displayImage函数的onchange方法来改变我的图像。任何想法我失踪？Javascript-onchange image change

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

来源

2014-09-20 Heather

该函数是否被调用？例如，如果将警报放入displayImage（）中，警报是否会被调用？这样，你就会知道它是否是一个功能问题，而不是被称为 - 与所谓的功能 - 被称为 - 但不是做什么 - 你想要的。 – 2014-09-20 13:54:59

如果你想改变基础上，下拉列表中的值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的函数调用和修改功能本身。

来源

2014-09-20 13:56:56 rocky

谢谢！这工作完美！ – Heather 2014-09-20 14:11:42

试试这个：

function displayImage() { 
    var image = document.getElementById("canvas"), 
     select = document.getElementsByTagName('select')[0]; 
    image.src = select.value; 
}

或更紧凑：

function displayImage() { 
    document.getElementById("canvas").src = document.getElementsByTagName('select')[0].value; 
}

这里是example

来源

2014-09-20 13:59:17 friedi

你可以试试这个：您select名称更改为id。

<html> 
<head> 
    <title>Select Image</title> 
    <script type="text/javascript"> 
    function displayImage() { 
    var image = document.getElementById("imageList").value; 
    document.getElementsByTagName("img")[0].setAttribute("src",image) 
    } 
    </script> 
</head> 
<body> 
    <form name="controls"> 
    <img id="canvas" src="pictures/fire1.jpg" /> 
    <select id="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>

来源

2014-09-20 14:01:03

Javascript-onchange image change

回答

相关问题