javascript - 在 上更改 'innerHTML' 不更改图像

Question

这是我的代码:

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
}

我有一些 GIF 图片。我想在文本框中写一个图像名称，然后在单击按钮时显示图像。然而，这并没有发生。为什么？

Answer 1

你应该这样做:

document.getElementById('image').src = c;

通过做 document.getElementById('image').innerHTML=b您正在尝试在 <img> 中定义 HTML不可能的标签。

完整脚本:

function changeimage() {
    var a = document.getElementById('text').value;
    var c = a + ".gif";

    document.getElementById('image').src = c;
}