Insert html image when button is clicked using javascript innerHTML
Question
I am trying to figure out why it is working for text and not for images. When I try displaying "some text here" instead of the image tag in the div with id image box it works. In theory I should be able to insert an image using 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>
3 answers
solution1
0 2017-04-17 19:52:26
innerHtml is basically used to get and set content of html element, while showing an image requires an <img> element itself. Both are different scenarios.
In first you are setting some content say text which you have seen by setting innerhtml with some textual content.
In other you are trying assign a kind of object.
If you want to insert image using javascript or jQuery, you can do this by append a child which would be <img> element itself of "imagebox".
solution2
0 2017-04-17 19:57:52
<script>
function myfunction(){
document.getElementById('imagebox').innerHTML =
" <img src = \"infinix.png\" alt = \"infinix\">";
}
</script>
just add the \\ before " so it will work correctly
solution3
0 ACCPTED 2017-04-17 20:56:52
Your code is not working because 2 problems, first, you cant use the same quotation marks to set the value of the innerHTML and using again inside the value, you need use different quotation marks.
For example, your " in the src and alt is the same as the beginning of the innerHTML value " :
document.getElementById('imagebox').innerHTML = " <img src = "https://dummyimage.com/200x100/000/fff" alt = "infinix">";
The correct way is using " for innerHTML and ' for src and alt , something like this:
document.getElementById('imagebox').innerHTML = " <img src = 'https://dummyimage.com/200x100/000/fff' alt = 'infinix'>";
Solving this, you need call the function, in your code is only defined, but not used. just add myFunction() below the code.
for example:
function myfunction(){
... stuff ...
}
//Launch the function
myfunction();
There is an example working: https://jsfiddle.net/46dstzob/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.