Why is currentParent undefined

Question

In the findParentByClassName function below, currentParent is returning undefined. Can someone tell me why? I think it's actually returning undefined in getSongItem, clickHandler and HTML TableRowElement as well.

This is where the problem seems to be occuring.

var findParentByClassName = function(element, targetClass) {
    if (element) {
        if (element.parentElement && element.parentElement.className) {    
            if (element.parentElement === null) {
                console.log("No parent found");
            } else if (element.parentElement.className !== targetClass) {
                console.log("No parent found with that class name.");
            } else if (element.parentElement !== null &&
                element.parentElement.className === targetClass) {
                var currentParent = element.parentElement;
            }

            while (currentParent.className !== targetClass && currentParent.className !==
                null) {
                currentParent = currentParent.parentElement;
            }
            //I need to know why currentParent is returning undefined
            return currentParent;
        }
    }    
};

There may be a problem here as well.

var getSongItem = function(element) {
    switch (element.className) {
        case 'album-song-button':
        case 'ion-play':
        case 'ion-pause':
            return findParentByClassName(element, 'song-item-number');
        case 'album-view-song-item':
            return element.querySelector('.song-item-number');
        case 'song-item-title':
        case 'song-item-duration':
            return findParentByClassName(element, 'album-view-song-item').querySelector('.song-item-number');
        case 'song-item-number':
            return element;
        default:
            return;
    }
};

I'm not sure how to, after I've already created the original post. — Justin Roohparvar, Aug 10 '17 at 14:02
Can you reproduce the issue at stacksnippets? See https://stackoverflow.com/help/mcve — guest271314, Aug 10 '17 at 14:03

Just a student · Answer 1 · 2017-08-11T08:08:26.440

You are only initializing currentParent to a value in case the parent of element has the class you are looking for. In all other cases, currentParent is not defined. Your while loop would then crash, with a ReferenceError. You might see that in the web console¹ when you open it.

Apart from that, your code has the issue that you check if the full value of the class attribute equals the class you are looking for. This would go wrong when an element has class="foo bar" and you want to match an element with class foo. A better approach is to use the classList.

/**
 * Return the closest ancestor of the given element that has the
 * given class, or false if no such ancestor exists.
 */
function findParentWithClass(element, className) {
  if (element === null || element.parentElement === null) {
    return false;
  }
  do {
    element = element.parentElement;
  } while (!element.classList.contains(className) &&
      element.parentElement !== null);
  if (!element.classList.contains(className)) {
    return false;
  }
  return element;
}

let el = document.getElementById('start');
console.log(findParentWithClass(el, 'bar')); // will find '.bar'
console.log(findParentWithClass(el, 'fop')); // false, as there is no '.fop'

<div class="foo red">
  <div class="bar brown">
    <div class="baz orange">
      <div class="bor blue">
        <div id="start"></div>
      </div>
    </div>
  </div>
</div>

__________
¹That reference is for Firefox, but all modern browsers have a web console.

score -1 · Answer 2 · answered Aug 10 '17 at 14:28

-1

Hard to know with only the code above but you are testing for null but not undefined. I would change the code to:

if (typeof element.parentElement!= "undefined") {
    console.log("parentElement is undefined");
} else if (element.parentElement.className !== targetClass) {
....

As per Check if object exists in JavaScript

answered Aug 10 '17 at 14:28

Yehuda Prizont

1
2

The full code for the script can be found here: https://github.com/jar9tf/bloc-jams/blob/master/scripts/album.js I don't necessarily want to check to see if it's undefined, but rather see why it's not defined – Justin Roohparvar Aug 10 '17 at 14:44
As per [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement), the `parentElement` of a node is always an element or `null`, so checking for null is enough. In fact, as `null` is defined, *your* check would fail to recognize a node without parent. – Just a student Aug 11 '17 at 08:09

Why is currentParent undefined

2 Answers2