trouble with JavaScript innerHTML to image replacement

Question

I am new to JavaScript and am doing a project for a class. I want to create an Easter egg somewhere on the page that when clicked changes the whole page code to a single image. This is my code just to test out the concept:

<div id = "all">
    <p>The button below changes the whole page.</p>

    <button type = "button" onclick = "changePage()">Click Here</button>
</div>

<script>
    function changePage()
    {
        document.getElementById("all").innerHTML = "<img src = "stop.jpg" />";
    }
</script>

The content isn't replaced by the image stop.jpg, however when I change the line to:

document.getElementById("all").innerHTML = "<h1>Whatever</h1>";

The code changes to the simple heading with no problems. Any idea why?

nicael · Accepted Answer · 2014-11-06 22:53:39Z

1

Didn't you notice that quotes are repeating? You should wrap your img with another quotes:

'<img src = "stop.jpg" />'

Or escape them

"<img src = \"stop.jpg\" />"

answered Nov 6, 2014 at 22:53

nicael

19.1k13 gold badges65 silver badges93 bronze badges

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

Comments

Barmar · Accepted Answer · 2014-11-06 22:54:24Z

0

The problem is with your quoting. The double quotes around the stop.jpg URL are ending the string that begins with <img. You need to use single quotes or escape the quotes:

document.getElementById("all").innerHTML = "<img src = 'stop.jpg' />";

document.getElementById("all").innerHTML = "<img src = \"stop.jpg\" />";

Didn't you get a syntax error in the Javascript console? Or notice the changed color in SO's syntax highlighting?

answered Nov 6, 2014 at 22:54

Barmar

789k57 gold badges555 silver badges669 bronze badges

4 Comments

all_type_programmer4739 Over a year ago

Oh OK. Wow I feel uneducated now. I don't know why I didn't think of that. Thanks, works now! :D

all_type_programmer4739 Over a year ago

Haha sorry, just commented on the first one I read. Thanks to you both! And no I didn't get a syntax error, I'm simply using Notepad++ to create/edit my files.

Barmar Over a year ago

You should have gotten a syntax error when you tried to load your page. Don't you check the Javascript console in the browser when you're trying to debug Javascript?

all_type_programmer4739 Over a year ago

No, I don't know about the javascript console. When I said I'm new, I meant like just started using JavaScript this morning. lol

Collectives™ on Stack Overflow

trouble with JavaScript innerHTML to image replacement

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related