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?

Answer 1

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