pure javascript - creating my own fadeout function

Question

I'm trying to create a similar function to the jquery .fadeOut() effect in pure javascript, but I'm having trouble with my code. The error code:

span[0].fadeOutEffect is not a function

My code:

var span = document.querySelectorAll("span");

function fadeOutEffect() {
  var node = this
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

span[0].fadeOutEffect();

<span>one </span><span>two </span><span>three </span>

You created a function but it's not magically going to become a property of every `` element. — Pointy, Jul 20 '18 at 14:31
To elaborate on Pointy's comment, if you want to fade `span[0]`, you would probably want to add the element as a *parameter*, like `function fadeOutEffect(element) { ... }` and call it via `fadeOutEffect(span[0]);`. — Tyler Roper, Jul 20 '18 at 14:34

score 1 · Answer 1 · answered Jul 20 '18 at 14:44

When I read your code, I see you likely want to add a function to the HTMLElement prototype - it is not recommended but it will look like this:

HTMLElement.prototype.fadeOutEffect = function() {
  var node = this
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

var span = document.querySelectorAll("span");


span[0].fadeOutEffect();

<span>one </span><span>two </span><span>three </span>

A cleaner way is passing the span:

var fadeOutEffect = function(node) {
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

var span = document.querySelectorAll("span");


fadeOutEffect(span[0]);

<span>one </span><span>two </span><span>three </span>

score 0 · Answer 2 · edited Jul 20 '18 at 14:37

Your code is attempting to call a function, on a DOM element, which doesn't exist. Try passing the element as a parameter to your function instead.

var span = document.querySelectorAll("span");

function fadeOutEffect(node) {
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

fadeOutEffect(span[0]);

<span>one </span><span>two </span><span>three </span>

score 0 · Answer 3 · answered Jul 20 '18 at 14:36

You are trying to add a function as a property to the array of span elements. You should instead pass it as a parameter to the function you created. Also, document.querySelectorAll("span"); returns an array of spans, as there can be multiple in your HTML document, so you can loop through each and apply you code to them.

See working example:

function fadeOutEffect(nodes) {
  nodes.forEach(function(node) { // Loop through each node (each span) in the array of spans
    var fadeEffect = setInterval(function() { // Run your code
      if (!node.style.opacity) {
        node.style.opacity = 1;
      }
      if (node.style.opacity > 0) {
        node.style.opacity -= 0.1;
      } else {
        clearInterval(fadeEffect);
      }
    }, 50);
  });
}

var nodes = document.querySelectorAll("span"); // Nodes is an array of spans
fadeOutEffect(nodes); // Pass the array of spans to your function

<span>Hello world!</span>

pure javascript - creating my own fadeout function

3 Answers3