更改'innerHTML'在<img>不改变图像
Changing 'innerHTML' on <img> not changing image
这是我的代码:
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图片。我想在文本框中写一个图像名称,然后在单击按钮时显示图像。然而,这并没有发生。为什么?
您应该这样做:
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;
}
试试这个:
<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>
document.getElementById("image").setAttribute("src","another.gif")
为了更新<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);
}
相关文章:
- 谷歌地球Api改变图像对比度
- nodejs改变图像质量
- JavaScript,用动画改变图像
- 为什么可以't改变图像's src属性
- 不断改变图像的色调
- 更改'innerHTML'在<img>不改变图像
- Javascript-改变图像的宽度
- 在Laravel 5.3中动态改变图像
- 只有Javascript -改变图像悬停在隐藏的单选按钮
- JS滑块不能改变图像的动画时间
- 在画布上改变图像的颜色/色调的最好方法是什么?
- 在点击/取消点击按钮时改变图像
- Javascript改变图像/背景图像不工作
- 标题基于改变图像
- 在JavaScript中改变图像的位置
- 我每隔几秒钟就会改变图像,同时也会以100%的高度和宽度响应缩放图像
- 使用jQuery在改变图像之间添加平滑度
- 理解改变图像源的概念
- 我如何注册使用javascript/jquery改变图像src
- 不能通过javascript改变图像的宽度和高度