logo标签列表

更改<img>标签上的'innerHTML'不会更改图片

javascripthtmlimage
3

以下是我的代码:

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图片。我想在文本框中写入图片名称，然后在单击按钮时显示该图片。但是，这并没有发生。为什么?

4个回答
10

你应该这样做：

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;
}
2
请尝试以下方法：
<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>
0
document.getElementById("image").setAttribute("src","another.gif")
0

为了更新<img>标签，您需要更新它的源代码，而不是它的内部HTML。

function changeimage()
{
  var a=document.getElementById('text').value
  var c=a+".gif"
  c="\""+c+"\""
  var elem = document.getElementById('image');
  elem.setAttribute('src', c);
}
innerHTML 的实际用途是什么？ - sovon
@sovon 它用于更改/访问元素内部的HTML。 - JaredPar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接