CODEWITHSUNDEEP
javascripthtml
Heyaya
Heyaya

Reputation: 13

Button changing image

This is my code. I'm new to JavaScript and this is my first ever code (I've been staring at it for two days and can't figure out what's wrong).

I'm trying to write an HTML page, which allows the user to change an image by clicking on a button, and going back to the original image by clicking another.

When I execute it the first image is displayed along with the two buttons, but when I click either of them the image just goes blank.

<!DOCTYPE html>
<html>

<body>

  <button onclick="document.getElementById('IMG').src = 'C:\Users\Username\Desktop\firstcode\img2.jpg'">IMAGE 2</button>

  <img id="IMG" src="C:\Users\Username\Desktop\firstcode\img1.gif">

  <button onclick="document.getElementById('IMG').src = 'C:\Users\Username\Desktop\firstcode\img1.jpg'">IMAGE 1</button>


</body>

</html>

How can I fix this?

Upvotes: 1

Views: 83

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074148

In JavaScript string literals, the \ is an escape character, not a literal character. That's so we can use things like \n for newline, \t for tab, etc. To put a literal \ in the strings you're assigning to the src property, you need \\:

<button onclick="document.getElementById('IMG').src = 'C:\\Users\\Username\\Desktop\\firstcode\\img2.jpg'">IMAGE 2</button>

<img id="IMG" src="C:\Users\Username\Desktop\firstcode\img1.gif">

<button onclick="document.getElementById('IMG').src = 'C:\\Users\\Username\\Desktop\\firstcode\\img1.jpg'">IMAGE 1</button>

You don't have to do that in the img tag because \ isn't an escape character in HTML.

Side note: Just to warn you of a common pitfall people run into: If your button elements were in a form, they would try to submit the form, because the (to my mind very surprising) default type of a button element is "submit". To prevent it, you'd use <button type="button" ...>. But that's not a problem in what you've shown because they aren't in a form.

Enjoy your learning! A couple of things to look at next:

  • Using modern event handling via addEventListener rather than onxyz-attribute-style event handlers (also called "DOM0" handlers because they weren't specified in any DOM standard for years). (If you want to learn about supporting obsolete browsers that dont' have it, my answer here has something you can use.)

  • Using a locally-installed web server (there are lots you can choose from) rather than opening HTML files directly. This is because browsers treat HTML files opened directly (e.g., file:/// URLs) differently from HTML loaded from a server, so if your goal is to learn about programming for web applications or pages, best to work with a web server.

Upvotes: 3

Related Questions