Changing 'innerHTML' on <img> not changing image
Question
Here is my code:
HTML
<form>
<img id='image' src=""/>
<input type='text' id='text'>
<input type="button" value="change picture" onclick="changeimage()">
</form>
JavaScript
function changeimage() {
var a=document.getElementById('text').value
var c=a+".gif"
c="\""+c+"\""
var b= "<img src="+c+"\/>"
document.getElementById('image').innerHTML=b
}
I have some GIF images. I want to write an image name in the textbox and then have the image become shown when the button is clicked. However, it's not happening. Why?
4 answers
solution1
8 ACCPTED 2012-01-17 17:43:11
You should do this:
document.getElementById('image').src = c;
By doing document.getElementById('image').innerHTML=b you are trying to defined the HTML inside the <img> tag which is not possible.
Full script:
function changeimage() {
var a = document.getElementById('text').value;
var c = a + ".gif";
document.getElementById('image').src = c;
}
solution2
2 2012-01-17 17:47:48
Try this instead:
<html>
<body>
<script type="text/javascript">
function changeimage() {
var a = document.getElementById('text').value;
document.getElementById('image').src = a + '.gif';
}
</script>
<form>
<img id='image' src=""/>
<input type='text' id='text'>
<input type="button" value="change picture" onclick="changeimage()">
</form>
</body>
</html>
solution3
0 2012-01-17 17:43:55
document.getElementById("image").setAttribute("src","another.gif")
solution4
0 2012-01-17 17:44:54
In order to update the <img> tag you need to update it's source, not it's inner HTML.
function changeimage()
{
var a=document.getElementById('text').value
var c=a+".gif"
c="\""+c+"\""
var elem = document.getElementById('image');
elem.setAttribute('src', c);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript— changing the innerHTML of an image
Changing innerHTML
Efficient method of changing the image displayed on an <img>?
innerHTML not changing on window load
Javascript InnerHTML text not changing
Get InnerHTML of Changing Div
innerHTML not changing div output
IE innerHTML changing content?
innerHTML not changing on setInterval
Changing the link color in .innerHTML
Related Tags