CODEWITHSUNDEEP
javascript
Teebling
Teebling

Reputation: 95

Getting javascript to select ALL elements, not just the first one

I have copied a script which does some cool stuff with a floating tooltip (sticks to cursor and flips depending on which quadrant of the viewport it is in, to keep it visible at all times etc).

Everything works fine for the first element found. But it doesn't work on the second element, or any elements after that either.

// I want to select ALL divs with the class 'z-tooltip' but it only seems to select the first one
var tooltip = this.document.getElementsByClassName("z-tooltip")[0];

window.onmousemove = function(ev) {

  var leftPixelSpace = ev.clientX;
  var rightPixelSpace = this.innerWidth - leftPixelSpace; 
  var topPixelSpace = ev.clientY;
  var bottomPixelSpace = this.innerHeight - topPixelSpace;

  var tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace  - tooltip.offsetWidth : leftPixelSpace;
  var tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace;
  
  // I want to apply these styles to ALL divs with the class 'z-tooltip', but again, it only seems to work on the first div...
  tooltip.style.left = tooltipPosX+"px";
  tooltip.style.top = tooltipPosY+"px";
};
.z-tooltip {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  background-color : lightblue;
  text-align: center;
  position: absolute
}
<div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

I did some reading and I have seen that getElementsByClassName("z-tooltip")[0] returns them as an HTML collection, which is not what I want.

Instead I should use querySelectorAll('.z-tooltip) which would select all elements with the class z-tooltip. However when I use this none of the script works any more :(

Furthermore, I want to be able to apply a style (see end of snippet) to ALL elements with the class z-tooltip. I know that to do this I will need to 'loop through' all of them and apply the style. Here's what I've tried so far but it doesn't work:

for (var i=tooltip.length; i--;) {

tooltip.style.left = tooltipPosX+"px";
tooltip.style.top = tooltipPosY+"px";

}

Can anyone point out what I'm doing wrong here?

Upvotes: 0

Views: 45

Answers (1)

Taplar
Taplar

Reputation: 24965

// I want to select ALL divs with the class 'z-tooltip' but it only seems to select the first one
var tooltip = this.document.getElementsByClassName("z-tooltip");

window.onmousemove = function(ev) {

  var leftPixelSpace = ev.clientX;
  var rightPixelSpace = this.innerWidth - leftPixelSpace; 
  var topPixelSpace = ev.clientY;
  var bottomPixelSpace = this.innerHeight - topPixelSpace;
  
  // I want to apply these styles to ALL divs with the class 'z-tooltip', but again, it only seems to work on the first div...
  [...tooltip].forEach(tooltip => {
    let tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace  - tooltip.offsetWidth : leftPixelSpace;
    let tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace;

    tooltip.style.left = tooltipPosX+"px";
    tooltip.style.top = tooltipPosY+"px";
  });
};
.z-tooltip {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  background-color : lightblue;
  text-align: center;
  position: absolute
}
<div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

  • Took the [0] off to get all the tooltips
  • Change the logic to [...tooltip].forEach to convert the result to an array that could then be looped over

Upvotes: 2

Related Questions