make createElement a link on the IMG attribute-CodePudding

i've created an element in javascript that shows an image:

 const image = document.createElement('img');
                        image.setAttribute('class', 'imgGame');
                        image.setAttribute('alt', game.name );
                        image.setAttribute('title', game.name );
                        image.src = game.background_image;
                        card.appendChild(image);

now i've tried to add

image.setAttribute('href', mylinkVariable);

image.href =

but i can't make the image a link (target blank and nofollow) to a website.

what i'm doing wrong?

CodePudding user response：

wrap the <img> with an <a> and then add the href to it.

img.onclick = () => window.location.replace('YOUR URL');

CodePudding user response：

You can't add link to img just wrap with a(link) tag like this;

const card = document.getElementById('card');
const link = document.createElement('a');
const image = document.createElement('img');
image.setAttribute('class', 'imgGame');
image.setAttribute('alt', game.name);
image.setAttribute('title', game.name);
image.src = game.background_image;
link.appendChild(image);
link.setAttribute('href', mylinkVariable);
card.appendChild(link);

CodePudding user response：

Attach a click event listener to the image which assigns the desired location to window.location when the image has been clicked:

const image = document.createElement('img');
image.setAttribute('class', 'imgGame');
image.src = 'https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1';
document.body.appendChild(image);

image.addEventListener('click', () => location = "https://stacksnippets.net")