Undefined List Item

Question

I've got a problem.

let liList = document.getElementsByTagName("li");
console.log(liList[1].innerText);

ul {
  width: 60%;
  margin: auto;
  box-sizing: border-box;
  padding: 0;
}

li {
  list-style-type: none;
  padding: 10px;
  padding-left: 35px;
  position: relative;
}

ul li {
  background-color: rgb(226, 226, 226);
}

ul li:nth-child(odd) {
  background-color: rgb(245, 245, 245);
}

ul li:hover {
  background-color: rgb(192, 192, 192);
  cursor: pointer;
}

li.cekirano::before {
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  content: '';
  top: 10px;
  left: 16px;
  height: 15px;
  width: 7px;
  position: absolute;
  transform: rotate(45deg);
}

li.cekirano {
  background-color: rgb(97, 97, 97);
  color: white;
  text-decoration: line-through;
}

span {
  padding: 5px;
  position: absolute;
  right: 5px;
  text-transform: none;
  top: 5px;
  bottom: 5px;
}

<ul>
  <li>Hit the gym<span>×</span></li>
  <li>Pay bills<span>×</span></li>
  <li>Meet George<span>×</span></li>
  <li>Buy eggs<span>×</span></li>
  <li>Read a book<span>×</span></li>
  <li>Organize<span>×</span></li>
</ul>

But there's an error when I run it into a internet browser: Uncaught TypeError: Cannot read properties of undefined (reading 'innerText') at script.js:2:26

I'm trying to make a to-do list like this on my own. I looked how they did it, and I did similar thing with their code and it gives me good result. Thank you in advance, N.P.

As it runs without error on stackoverflow, are you sure that your code executes _after_ the DOM has been built? Otherwise `document.getElementsByTagName` returns empty-handed which would be consistent with the reported error message. Remedy: the code in an event handler: `document.addEventHandler('DOMContentLoaded', () => { /* your code goes here */ });`. — collapsar, Jun 29 '22 at 10:06

score -1 · Answer 1 · answered Jun 29 '22 at 10:09

move the script to the bottom

final code would be like this

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <style>
        ul {
            width: 60%;
            margin: auto;
            box-sizing: border-box;
            padding: 0;
        }

        li {
            list-style-type: none;
            padding: 10px;
            padding-left: 35px;
            position: relative;
        }

        ul li {
            background-color: rgb(226, 226, 226);
        }

        ul li:nth-child(odd) {
            background-color: rgb(245, 245, 245);
        }

        ul li:hover {
            background-color: rgb(192, 192, 192);
            cursor: pointer;
        }

        li.cekirano::before {
            border-color: #fff;
            border-style: solid;
            border-width: 0 2px 2px 0;
            content: '';
            top: 10px;
            left: 16px;
            height: 15px;
            width: 7px;
            position: absolute;
            transform: rotate(45deg);
        }

        li.cekirano {
            background-color: rgb(97, 97, 97);
            color: white;
            text-decoration: line-through;
        }

        span {
            padding: 5px;
            position: absolute;
            right: 5px;
            text-transform: none;
            top: 5px;
            bottom: 5px;
        }
    </style>

    <ul>
        <li>Hit the gym<span>×</span></li>
        <li>Pay bills<span>×</span></li>
        <li>Meet George<span>×</span></li>
        <li>Buy eggs<span>×</span></li>
        <li>Read a book<span>×</span></li>
        <li>Organize<span>×</span></li>
    </ul>
    <script>
        let liList = document.getElementsByTagName("li");
        console.log(liList[1].innerText);
    </script>
</body>

Undefined List Item

1 Answers1