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? — Merna Mustafa
– Merna Mustafa, Commented Mar 13, 2022 at 10:57
Is there a reason you can't wrap the <img /> in an <a>? (i.e. Do you control the HTML or not? If you do, then just add a <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
– Dai, Commented Mar 13, 2022 at 10:57
Can you add the HTML to your question as a minimal reproducible example, please? — Andy
– Andy, Commented Mar 13, 2022 at 10:57

Marian · Accepted Answer · 2022-03-13 10:59:43Z

1

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.

answered Mar 13, 2022 at 10:59

Marian

441 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related