Unexpected "undefined" DOM

JavaScript
1

Hello,
I keep getting “undefined”, and don’t know why is it, I know the error is somewhere at “deleteButton()” but everything looks good to my nub eyes,
I’m missing something?

const input = document.querySelector('input');
const button = document.querySelector('.button');
const theList = document.querySelector('ul');

function addingToList() {
    let itemList = document.createElement('li');
        theList.appendChild(itemList);
    let userItem = input.value;
    
    function deleteButton() {
        let delB = document.createElement('button');
            delB.id = 'delete-el';
            delB.textContent = 'Delete';
            
            theList.appendChild(delB);
    }
       
    itemList.textContent = userItem + ' ' + deleteButton();
}
2

Do you have the html you are using. Maybe one of he elements is misspelled?

3 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping list example</title>
    <link href="./css.css" rel="stylesheet">
  </head>
  <body>

    <h1>My shopping list</h1>

    <div>
      <label for="item">Witch item would you like to buy?</label>
      <input type="text" name="item" id="item" placeholder="Enter a new item here">
      <button class='button' onclick="addingToList()">Add item</button>
    </div>

    <ul>

    </ul>

    <script src="./index.js"></script>
  </body>
</html>

At first, I thought it was some kind of conflict with the button that’s why I added …delB.id = ‘delete-el’… to the JavaScript

6

Sorry, that took so long, but I think I got it figured out. Had nothing to do with input it had to do with the + " " + you were using. If you get rid of those and left the code to look like

itemList.textContent = userItem 
  deleteButton();

The undefined is gone.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.