Unexpected "undefined" DOM

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');
    let userItem = input.value;
    function deleteButton() {
        let delB = document.createElement('button');
            delB.id = 'delete-el';
            delB.textContent = 'Delete';
    itemList.textContent = userItem + ' ' + deleteButton();

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

<!DOCTYPE html>
    <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">

    <h1>My shopping list</h1>

      <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>



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

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

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 

The undefined is gone.

1 Like

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