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>

Why don't you just add your image onto an element, not using innerHTML, but could get a div, then appendChild with an image, lets say element.src = 'images/burgerking.jpg'; — TGarrett
– TGarrett, Commented Apr 17, 2017 at 19:26
Possible duplicate of Javascripts innerHTML not working for images, but works with text? — Alon Eitan
– Alon Eitan, Commented Apr 17, 2017 at 19:42

TriForce · Accepted Answer · 2017-04-17 20:56:52Z

1

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/

answered Apr 17, 2017 at 20:56

TriForce

4152 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fineboy1 Over a year ago

I only need the function to be called when a button is clicked but the quotations worked, thanks.

Osama · Accepted Answer · 2017-04-17 19:57:52Z

0

<script>

function myfunction(){
document.getElementById('imagebox').innerHTML = 
" <img src = \"infinix.png\" alt = \"infinix\">";
} 
</script>

just add the \ before " so it will work correctly

answered Apr 17, 2017 at 19:57

Osama

3,0301 gold badge15 silver badges16 bronze badges

Comments

marc_s · Accepted Answer · 2017-06-04 08:07:15Z

0

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".

edited Jun 4, 2017 at 8:07

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 17, 2017 at 19:52

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Insert html image when button is clicked using javascript innerHTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related