Changing getElementById to getElementsByClassName [Undefined]

Question

I have a problem using getElementsByClassName. When clicking on the add button, it appears on the list with the name undefined and not the value "hello". What am I doing wrong?

CODE:

function addItem(){
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementsByClassName("candidate");
  var li = document.createElement("li");
  li.setAttribute('class',candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
}

function removeItem(){
  var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementsByClassName("candidate");
  var item = document.getElementsByClassName(candidate.value);
  ul.removeChild(item);
}

<ul id="dynamic-list"></ul>
<button type="submit" class="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>

candidate class doesn't exist in your html. We don't know about your logic. You can only access proper classes and id's in your JS file. — Safwan Shaikh, Jul 31 '18 at 18:46
I had noticed of first issue but i copy the html code wrong here, but it still did not work with my code — Max, Aug 01 '18 at 19:52

score 0 · Answer 1 · answered Jul 31 '18 at 18:41

The problem is that you try to get the value of an unexisting DOM-element candidate. The possible solution could be to add an id-attribute to the button ADD and get this element in your function:

 function addItem() {
      var ul = document.getElementById("dynamic-list");
      var candidate = document.getElementById("item");
      var li = document.createElement("li");
      li.setAttribute('class', candidate.value);
      li.appendChild(document.createTextNode(candidate.value));
      ul.appendChild(li);
    }

    <ul id="dynamic-list"></ul>
    <button type="submit" class="item" id="item" value="hello" onclick="addItem()">ADD</button>
    <button onclick="removeItem()">remove item</button>

score 0 · Answer 2 · answered Jul 31 '18 at 19:17

The primary issue with your code is that the class name candidate does not exist anywhere in your HTML. If your goal is to reference the "ADD" button with this class, then you either need to change its class to candidate in your HTML, or change your JS to reference its actual class, item.

Furthermore, getElementsByClassName returns, as its name suggests, a NodeList of multiple elements, rather than a single element. This means that you'll need to select a single element from that list upon which to act; your code, in contrast, treats this method as though it returned only a single element to be acted upon directly (i.e., a Node instead of a NodeList). For your addItem function, this change is trivial; there's only one element with the item class, so simply select the first element of the NodeList (i.e., element 0). For the removeItem function, assuming you want to remove the most recently-added nodes first (LIFO-style), you'll need to remove the last element in the NodeList (if one exists) from the DOM. See the updated snippet below for all of these changes and some explanatory comments:

function addItem(){
  var ul = document.getElementById("dynamic-list");
  // We know that the "candidate" is always the first—and only—element with the class name "item"
  var candidate = document.getElementsByClassName("item")[0];
  var li = document.createElement("li");
  li.setAttribute('class',candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
}

function removeItem(){
  var ul = document.getElementById("dynamic-list");
  // We know that the "candidate" is always the first—and only—element with the class name "item"
  var candidate = document.getElementsByClassName("item")[0];
  // The "items" variable is introduced to hold the list of all added ".hello" elements, the last of which we will remove
  var items = document.getElementsByClassName(candidate.value);
  // Safety check: it's possible that there are no more ".hello" elements remaining, in which case there's nothing to remove
  if (items.length > 0) {
    // Access the last element of the NodeList and remove it from the DOM
    var item = items[items.length - 1];
    ul.removeChild(item);
  }
}

<ul id="dynamic-list"></ul>
<button type="submit" class="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>

Hi @aaplmath I had noticed of first issue but i copy the html code wrong here, but it still did not work with my code. your code works! but when clicking the add button, only add the same title that was added first time. For example, if you want to add the second title, the first one you click appears. I have a list in php with diferents values example 1 value="title 1" 2 value="title 2" 3 value="title" — Max, Aug 01 '18 at 19:51
It's difficult to tell what kind of functionality you're trying to achieve if you don't include some of your actual HTML. My guess would be that you should keep a counter that tracks how many elements are currently present and get the value of the appropriate "item" element based on that index, but from your description it's difficult to understand what behavior you're seeking. — aaplmath, Aug 01 '18 at 21:21

Changing getElementById to getElementsByClassName [Undefined]

2 Answers2