Vanilla JS window.location by attribute by classname

Question

I am trying to go from a Bootstrap 4 framework to a Bootstrap 5 framework - which means moving away from jQuery.

I have several elements on a page all with the classname .info-box and an attribute as follows

<div class="card card-icon col-md-4 info-box" data-href="file.php?e=AA">
<div class="card card-icon col-md-4 info-box" data-href="file.php?e=BB">
<div class="card card-icon col-md-4 info-box" data-href="file.php?e=CC">

When the user clicks on the card element, the intent is to open the link. The following JS gets close, but it links all three card elements to the Last Link (=CC)

        var elements = document.getElementsByClassName('info-box');
        for(var i = 0; i < elements.length; i++) {
            var element = elements[i];
            var newLoc= elements[i].getAttribute('data-href');
            element.onclick = function() {window.location = newLoc;}
        }

Can you suggest a way to make the correct data-href attribute link to the correct card?

score 0 · Answer 1 · answered Jan 08 '22 at 12:42

I think I found a solution .. Does this seem efficient?

<script>
    var elements = document.getElementsByClassName('info-box');
    [].forEach.call(elements, function(elements) {
      elements.onclick = function() {
        var newLoc= this.getAttribute('data-href');
        window.location = newLoc;
      }
    })
</script>

Found it over here .. javascript: call function by classname

score 0 · Answer 2 · answered Jan 08 '22 at 12:46

var elements = document.getElementsByClassName('info-box');
    for(let i = 0; i < elements.length; i++) {
        let element = elements[i];
        let newLoc= elements[i].getAttribute('data-href');
        element.onclick = function() {window.location = newLoc;}
    }

Use let instead of var.

score 0 · Answer 3 · answered Jan 08 '22 at 12:58

The problem is that var does not have block scope, which means in your case the variable newLocis defined globally. Use let instead of var.

I think I found a solution .. Does this seem efficient?

Your solution should also work fine, because it wraps the var newLoc in a function, which limits its scope. Using let is generally good practise though.

Wakka · Answer 4 · 2022-01-08T13:52:03.617

I'm sure there is a good reason you are not just using links for this. But I will say it anyway. This looks like a case for Links.

Secondly div's shouldn't be clickable. If the click does an interaction on page it should be a button if it directs to another page it should be an a tag. Also your div tags aren't closed </div>.

And lastly there is far more efficient and cleaner ways to iterate through elements. It's not 2006 anymore. Bellow should work for you.

P.s. the innerhtml bit is purely for show on the code snippet so you can see it.

document.querySelectorAll('.info-box').forEach(function(infoBox) {

  let newLoc = infoBox.getAttribute('data-href');
  infoBox.innerHTML = newLoc;
  infoBox.onclick = function() {
    window.location = newLoc;
  };

});

<button type="button" class="card card-icon col-md-4 info-box" data-href="file.php?e=AA"></button>
<button type="button" class="card card-icon col-md-4 info-box" data-href="file.php?e=BB"></button>
<button type="button" class="card card-icon col-md-4 info-box" data-href="file.php?e=CC"></button>

Vanilla JS window.location by attribute by classname

4 Answers4