How can I get every LI element’s innerHTML and display as string?

Im trying to get every LI element’s content and display every variable as they come in order. I’m using this simple exercise to demonstrate this, since I just wrote it and was sure it would work.

There are 3 list items: Mac, PC and Linux. When I want to display this elsewhere, only Linux comes out. What am I doing wrong?

<html>
<body>
    <p id="demo"></p>
    <ul>
        <li>Mac</li>
        <li>PC</li>
        <li>Linux</li>
    </ul>
</body>
</html>
    var list = document.querySelectorAll("LI");
    for (var i = 0; i < list.length; i++) {
        const computers = list[i].innerHTML;
        var all = computers.toString();
document.getElementById("demo").innerHTML = all;
    }

On a final note, how can I set a var for every element gotten? I’m imagining you can do this using FOR, but don’t know how to set an independent variable for each one.

Answer

1) You should use textContent instead of innerText.

2) You can create an array and push the data into it.

3) Eventually, you will get all computers strings in an array. Then you can use join them separated by comma ,

var list = document.querySelectorAll("LI");

const arr = [];

for (var i = 0; i < list.length; i++) {
  const computers = list[i].textContent;
  arr.push(computers);
}

document.getElementById("demo").innerHTML = arr.join(", ");
<p id="demo"></p>
<ul>
  <li>Mac</li>
  <li>PC</li>
  <li>Linux</li>
</ul>