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

回答

相關問題