使用javascript单击按钮时插入html图像innerHTML
我想弄清楚它为什么对文本起作用而对图像不起作用。当我尝试显示“一些文字在这里”,而不是与ID图像框的div中的图像标签它的作品。从理论上讲,我应该能够插入使用的innerHTML使用javascript单击按钮时插入html图像innerHTML
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "jumai.css">
<link rel = "stylesheet" href = "bootstrap.css">
</head>
<body>
<div class = "container">
<div class = "col-md-2">
<p> Some text here </p>
</div>
<div class = "col-md-8">
<div class = "middlemenu">
<ul class = "list">
<li> <button type = "button" class = "btn btn-default" onclick=
"myfunction()"> BESTSELLER BRANDS </button> </li>
<li> <button type = "button" class = "btn btn-default">TRENDING NOW
</button>
</li>
<li> <button type = "button" class = "btn btn-default">SHOP NAIJA BRANDS
</button> </li>
</ul>
</div>
<div id = "imagebox" >
</div>
</div>
<div class = "col-md-2">
<p> sOME TEST HERE </p>
</div>
</div>
<script>
function myfunction(){
document.getElementById('imagebox').innerHTML =
" <img src = "infinix.png" alt = "infinix">";
}
</script>
</body>
</html>
您的代码不工作,因为2个问题,第一,你不能使用相同的引号设置的innerHTML的值,然后再次使用。里面的值,就需要使用不同的引号
例如,您"
在src
和alt
相同innerHTML值"
的开头:
document.getElementById('imagebox').innerHTML = " <img src = "https://dummyimage.com/200x100/000/fff" alt = "infinix">";
使用"
进行的innerHTML和'
为src
和alt
,这样的事情的正确方法:
document.getElementById('imagebox').innerHTML = " <img src = 'https://dummyimage.com/200x100/000/fff' alt = 'infinix'>";
解决这个问题,需要调用的函数,在你的代码只定义,但不使用。只需在代码下方添加myFunction()
即可。
例如:
function myfunction(){
... stuff ...
}
//Launch the function
myfunction();
有一个例子的工作:https://jsfiddle.net/46dstzob/
我只需要点击一个按钮时调用的函数,但引用的工作,谢谢。 – fineboy1
的innerHTML基本上是用来获取和设置HTML元素的内容的图像,同时显示的图像需要<img>
元素本身。两者都是不同的情况。
首先,您通过设置innerhtml和一些文本内容来设置一些内容说你看到的文本。
在其他你试图分配一种对象。
如果您想要使用JavaScript或jQuery插入图片,您可以通过追加一个子元素来做到这一点,该子元素将是“imagebox”的元素本身。
<script>
function myfunction(){
document.getElementById('imagebox').innerHTML =
" <img src = \"infinix.png\" alt = \"infinix\">";
}
</script>
只需添加\“之前,所以它会正常工作
[链接](http://*.com/questions/11266104/javascripts-innerhtml-not-working-for-为什么不只是将图像添加到元素中,而不是使用innerHTML,而是可以获得div,然后appendChild与图像,让我们说element.src ='图像 - 但是与作品 - 文本)看到这个 –
/burgerking.jpg'; – TGarrett
你正在使用的代码在哪里? – broodjetom