Javascript creating <img>

Question

I have this code that is creating to div after clicking on button. But its not working... here is the html with script in it

<img id="boxm" style="position: fixed;left: 90%;padding-top:2%" 
src="images/box1.png" id="image1" onclick="diffImage(this);myFunction();" />
<script>
function myFunction()
{
document.getElementById("surprise").createElement="<img 
style="width:304px;height:228px"
src='images/mese.png' />";
}
</script>

<div id="surprise">

</div>

You have to escape double quote from img element.

Hkachhia
– Hkachhia

2017-10-14 06:39:27 +00:00
Commented Oct 14, 2017 at 6:39 — Hkachhia
– Hkachhia, Commented Oct 14, 2017 at 6:39
Document has a createElement method, Element doesn't.

Kaiido
– Kaiido

2017-10-14 06:46:05 +00:00
Commented Oct 14, 2017 at 6:46 — Kaiido
– Kaiido, Commented Oct 14, 2017 at 6:46
possible duplicate stackoverflow.com/questions/7802744/…

Damith
– Damith

2017-10-14 06:57:32 +00:00
Commented Oct 14, 2017 at 6:57 — Damith
– Damith, Commented Oct 14, 2017 at 6:57

Sivaraj S · Accepted Answer · 2017-10-14 06:53:51Z

1

<img src='images/box1.png' onclick="showSurpriseImage()" />
<div id="surprise">
    Surprise Image will be displayed here
</div>
<script>
function showSurpriseImage() {
    var x = document.createElement("IMG");
    x.setAttribute("src", "images/mese.png");
    x.setAttribute("width", "304");
    x.setAttribute("height", "228");
    x.setAttribute("alt", "surprise image");

    document.getElementById("surprise").appendChild(x);
}
</script>

Best Practice to set attributes checkout here

Hope this helps

answered Oct 14, 2017 at 6:53

Sivaraj S

3403 silver badges14 bronze badges

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

2 Comments

Molan Milon Over a year ago

Thank you, how would you do random TOP and LEFT position? I tried to do this var randomY = Math.round(Math.random() * availH) + 'px'; var randomX = Math.round(Math.random() * availW) + 'px'; x.style.left = randomX; x.style.top = randomY;

Sivaraj S Over a year ago

Code remain same. depends on the availH and availW before that do console the randomX and randomY check what it returns

Guy Yogev · Accepted Answer · 2017-10-14 06:58:00Z

0

<img id="boxm" 
src="http://wfarm1.dataknet.com/static/resources/icons/set28/7f8535d7.png" id="image1" onclick="myFunction();" />
<script>
function myFunction() {
    var s = document.getElementById("surprise")
    var x = document.createElement("IMG");
    x.setAttribute("src", "http://wfarm1.dataknet.com/static/resources/icons/set28/7f8535d7.png");
    s.appendChild(x);
}
</script>

<div id="surprise">

</div>

answered Oct 14, 2017 at 6:58

Guy Yogev

8695 silver badges14 bronze badges

Comments

Hkachhia · Accepted Answer · 2017-10-14 06:49:49Z

-1

Try this :

function myFunction()
{
document.getElementById("surprise").innerHTML='<img style="width:304px;height:228px" src="images/mese.png" />';
}

edited Oct 14, 2017 at 6:49

answered Oct 14, 2017 at 6:41

Hkachhia

4,5458 gold badges44 silver badges79 bronze badges

Collectives™ on Stack Overflow

Javascript creating <img>

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related