Trying to use querySelectorAll to iteratively run through all items of a particular class and make changes based on a set of conditions

Question

I am trying to make the various sentences in a document, with the class "line", grow increasingly opaque. When they get to be totally opaque, I want a sound to play and the opacity to begin reducing. For now I am trying to simply set the opacity to -.5 .

    function increaseOpacity() {

      var lines = document.querySelectorAll(".line");
      var increment = .01;

      for (var i = 0; i < lines.length; i++ ) {
        var element = lines[i];

        var x = element.getAttribute("opacity");

            if (x <= 1) {
                x += increment;
            }

            else if (x >= 1) {
                x = -.5;
                var audio = new Audio('sound/hush002.mp3');
                audio.play();               
            }

        }
    }


setInterval(increaseOpacity, 500);

It looks like you are getting the attribute, but never setting the attribute. — Jesse Kernaghan, Jan 16 '17 at 19:57
Do you have an `opacity` attribute? That's generally a style? — adeneo, Jan 16 '17 at 19:59
As a side note, this can be accomplished with CSS transitions as well. You could add a fade-in class and then when the transition ends, add a fade-out class. — Max Sindwani, Jan 16 '17 at 20:21
Consider changing the CSS rule instead. It's very much more efficient and doesn't require finding any elements with the class. See [*How to change/remove CSS classes definitions at runtime*](http://stackoverflow.com/questions/730048/how-to-change-remove-css-classes-definitions-at-runtime). — RobG, Jan 16 '17 at 20:30
@adeneo Thanks! I was able to adapt your jsfiddle and get it to work! — felixblue, Jan 16 '17 at 22:02

Michał Perłakowski · Answer 1 · 2017-01-16T20:09:57.687

Just changing x doesn't change the attribute. You have to call the setAttribute() method:

function increaseOpacity() {

  var lines = document.querySelectorAll(".line");
  var increment = .01;

  for (var i = 0; i < lines.length; i++ ) {
    var element = lines[i];

    var x = element.getAttribute("opacity");

        if (x <= 1) {
            element.getAttribute("opacity", x + increment);
        }

        else if (x >= 1) {
            element.getAttribute("opacity", -.5);
            var audio = new Audio('sound/hush002.mp3');
            audio.play();               
        }

    }
}

setInterval(increaseOpacity, 500);

If you meant to change a style instead of an attribute, do this:

function increaseOpacity() {

  var lines = document.querySelectorAll(".line");
  var increment = .01;

  for (var i = 0; i < lines.length; i++ ) {
    var element = lines[i];

    var x = parseInt(element.style.opacity);

        if (x <= 1) {
            element.style.opacity += increment;
        }

        else if (x >= 1) {
            element.style.opacity = -.5;
            var audio = new Audio('sound/hush002.mp3');
            audio.play();               
        }

    }
}

setInterval(increaseOpacity, 500);

And that will only work if you have a third party script that knows what to do with an `opacity` attribute on an element, as @adeneo suggests in his comment on the question. — Heretic Monkey, Jan 16 '17 at 20:04
@MikeMcCaughan Yes, the OP probably meant to change a style instead of an attribute. — Michał Perłakowski, Jan 16 '17 at 20:07
Yes, I couldn't get this to work, but @adeneo's jsfiddle link seemed to do the trick. Thank you so much for your time and consideration! — felixblue, Jan 17 '17 at 02:00

score 0 · Answer 2 · answered Jan 16 '17 at 20:09

0

Opacity is normally a style, not an attribute.

You should use:

var x = element.style.opacity;

add set it at some point using:

element.style.opacity = x;

after you increment (or decrement) x.

answered Jan 16 '17 at 20:09

Emmanuel

322
2
12

Trying to use querySelectorAll to iteratively run through all items of a particular class and make changes based on a set of conditions

2 Answers2