Change href for a div class based on screen size without jquery

Question

Trying to change an href based on the screen size, This is what I've tried based on my research

My JS isn't great so I figure i'd ask

var productLink = document.getElementsByClassName('productlink');

function changeLink() {
  if (window.innerWidth < 1025) {
    productLink.setAttribute('href', "product-page-mobile.html");
  }
  else {
    productLink.setAttribute('href', "product-page-desktop.html");
  }
}

changeLink();
window.addEventListener('resize', changeLink);

edit:

Tried

var productLink = document.getElementsByClassName('productlink');
for(var i = 0; i < productLink.length; i++)


function changeLink() {
  if (window.innerWidth < 1025) {
    productLink.setAttribute('href', "product-page-mobile.html");
  }
  else {
    productLink.setAttribute('href', "product-page-desktop.html");
  }
}

changeLink();
window.addEventListener('resize', changeLink);

Still doesn't work :(

Edit: This works.

[].forEach.call(document.getElementsByClassName('productlink'), function(productLink) {
    if (window.innerWidth < 1025) {
        productLink.setAttribute('href', "product-page-mobile.html");
      }
      else {
        productLink.setAttribute('href', "product-page-desktop.html");
      }
});

Try `var productLink = document.querySelector('.productlink')` to get just the first element with that class name — Phil, Jul 02 '20 at 00:47
Personally, I'd have multiple `` elements for each screen-size and show / hide them with CSS media queries — Phil, Jul 02 '20 at 00:48
Please learn to use your browser's developer console to look for errors. FYI, your `for` loop does nothing and changes nothing regarding the rest of your code — Phil, Jul 02 '20 at 00:53
I cant use media querys because the link is in an image, and in order to do that I would have to load 3x4 images because media querys don't prevent the image from loading. It would severely effect my pages load speed. — , Jul 02 '20 at 00:57
var productLink = document.querySelector('.productlink') doesn't work and edited code doesn't work either :( — , Jul 02 '20 at 00:59

Change href for a div class based on screen size without jquery

0 Answers0