HTML ID returning as "Undefined" with javascript console.log?

August 24, 2023

I am working on a system that gives an item an ID using javascript, and the next part takes the id and saves it (for now, it’ll log it), however when I try to log it, the ID returns as undefined when called outside of the same function the ID was set in.

//vars for add
let newItem;
let listNewItem;
let appended;
let idNum;
//the variable that helps list how many items have the class name of listItem
let listItemAmount = document.getElementsByClassName("listItem");

// adds the button to the end of the new to-do items
const buttonCode = ' <br><button class="deletebutton" onclick="del(this.id)">🗑</button><button class="checkbutton">✔</button>'


//vars for remove
let deleteBtns = document.getElementsByClassName("deletebutton");

//listens for button click to exeute the add function
document.getElementById("addButton").addEventListener('click', add);


//add a new task
function add() {

  // get value of the new item
  newItem = prompt("What is the name of your new task?");

  //create element
  listNewItem = document.createElement('li');
  listNewItem.innerHTML = newItem + buttonCode;
  listNewItem.classList.add("listItem");
  idNum = listItemAmount.length;
  listNewItem.id = 'item' + idNum;
  console.log(listNewItem.id);

  //append element
  appended = document.getElementById("list");
  appended.appendChild(listNewItem);
}

//deletes a task
function del(id) {
  console.log('id:', id.id);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="title">
    <h1>To Do</h1>
  </div>
  <div id="main">
    <div id="topmain">
      <button id="addButton">Add</button>
    </div>
    <div id="list">
      <li class="listItem">Go Outside <br><button class="deletebutton" onclick="del(this)">🗑</button><button class="checkbutton">✔</button>
      </li>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

I have tried console.log-ing the id using this.id placed in the parameters in the function and directly in the function.

Thanks for your time!

>Solution :

Because in your buttonCode, this in del(this) refers to the <button> element but not its parent element listItem. You may use target.parentElement to get its parent first and then gets its id:

//vars for add
let newItem;
let listNewItem;
let appended;
let idNum;
//the variable that helps list how many items have the class name of listItem
let listItemAmount = document.getElementsByClassName("listItem");

// adds the button to the end of the new to-do items
const buttonCode = ' <br><button class="deletebutton" onclick="del(this)">🗑</button><button class="checkbutton">✔</button>'


//vars for remove
let deleteBtns = document.getElementsByClassName("deletebutton");

//listens for button click to exeute the add function
document.getElementById("addButton").addEventListener('click', add);


//add a new task
function add() {

  // get value of the new item
  newItem = prompt("What is the name of your new task?");

  //create element
  listNewItem = document.createElement('li');
  listNewItem.innerHTML = newItem + buttonCode;
  listNewItem.classList.add("listItem");
  idNum = listItemAmount.length;
  listNewItem.id = 'item' + idNum;
  console.log(listNewItem.id);

  //append element
  appended = document.getElementById("list");
  appended.appendChild(listNewItem);
}

//deletes a task
function del(target) {
  console.log('id:', target.parentElement.id);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="title">
    <h1>To Do</h1>
  </div>
  <div id="main">
    <div id="topmain">
      <button id="addButton">Add</button>
    </div>
    <div id="list">
      <li class="listItem" id="first-item">Go Outside <br><button class="deletebutton" onclick="del(this)">🗑</button><button class="checkbutton">✔</button>
      </li>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>