How to make an image as a clickable link to another html page using javascript?

Question

This is the JavaScript code I wrote :

var goToSecondPage= document.querySelector('.mobile');

goToSecondPage.addEventListener("click", function() {

document.location.href='productDetails.html';
 })

I'm trying to use an image in an existed class on an index html page (called mobile) and make it as a clickable link image to another html file called productDetails.html

Does this answer your question? [How do I add a .click() event to an image?](https://stackoverflow.com/questions/7374562/how-do-i-add-a-click-event-to-an-image) — Merna Mustafa, Mar 13 '22 at 10:57
Is there a reason you can't wrap the `` in an ``? (i.e. Do you control the HTML or not? If you do, then just add a `` in the HTML and skip scripting entirely - that way users using keyboard-navigation can navigate, as well as middle-clicking for opening in a new tab, as well as supporting users with JS disabled, etc. — Dai, Mar 13 '22 at 10:57

score 1 · Answer 1 · answered Mar 13 '22 at 10:59

It depends where your productDetails.html file is located. If it's in the root directory try

var goToSecondPage = document.querySelector('.mobile');

goToSecondPage.addEventListener("click", function() {
    document.location.pathname = '/productDetails.html';
});

This will only change your path, not the entire url.

How to make an image as a clickable link to another html page using javascript?

1 Answers1