Próbuję pobrać zawartość każdego elementu LI i wyświetlić każdą zmienną w kolejności. Używam tego prostego ćwiczenia, aby to zademonstrować, ponieważ właśnie je napisałem i byłem pewien, że zadziała. ...

0
Omar F. Kuri 25 czerwiec 2021, 01:14

4 odpowiedzi

Najlepsza odpowiedź

1) Powinieneś użyć textContent zamiast innerText.

2) Możesz utworzyć tablicę i umieścić w niej dane.

3) Ostatecznie otrzymasz wszystkie computers ciągi w tablicy. Następnie możesz użyć dołączyć do nich oddzielone przecinkiem ,

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>
0
decpk 24 czerwiec 2021, 23:11

Oto jeden wiersz, który daje zmienną os_list (spójrz na console.log po uruchomieniu) i ustawia element #demo.

Takie opcje jednowierszowe nie są najlepsze do nauki, ale wiedząc, że otrzymasz wiele różnych odpowiedzi, pomyślałem, że pójdę na coś innego. Oto jeden linijka:

let d=document, os_list = d.querySelector('#demo').innerHTML=[...d.querySelectorAll("li")].map(e=>e.innerText).join(', ');

Oto to samo z komentarzami na temat tego, jak to działa:

let d=document, 
// this lets us use 'document' in a shortened way
    os_list = d.querySelector('#demo').innerHTML= 
    // our eventual target element whose innerHTML will be populated with our result plus our variable name 'os_list' which will also get the result
     [...d.querySelectorAll("li")] 
     // the [...spread] syntax - this basically says take the HTML collection of <li> elements and make it iterable like an array
     .map(e=>e.innerText) 
     // map lets us take each <li> element and return the inner text. Basically we're swapping the element for the text here
     .join(', '); 
     // all that gave us an array, and join() lets us combine it back into a comma separated string
let d=document, os_list = d.querySelector('#demo').innerHTML=[...d.querySelectorAll("li")].map(e=>e.innerText).join(', ');
console.log(os_list)
<ul>
  <li>Mac</li>
  <li>PC</li>
  <li>Linux</li>
</ul>
<hr>
Result:
<p id="demo"></p>
0
Kinglish 24 czerwiec 2021, 22:33

innerHTML zastępuje bieżący wewnętrzny HTML węzła, więc w ten sposób zawsze wyświetlisz ostatni komputer .

Spróbuj czegoś takiego:

var computers = ''; // variable to contain the final string
var list = document.querySelectorAll("LI");
for (var i = 0; i < list.length; i++) {
    const computer = list[i].innerHTML; // here you are getting only the li string
    // var all = computers.toString();
    // document.getElementById("demo").innerHTML = all;
    computers += `${computer}, ${computer}`;
}
document.getElementById("demo").innerHTML = computers; // outside for loop
0
Arthur Borba 24 czerwiec 2021, 22:23

Twój kod ma bardzo drobny problem

Spróbuj tego

<html>
    <head>
        <script>
        function showLi(){
            var list = document.querySelectorAll("LI");
            var computers='';
            for (var i = 0; i < list.length; i++) {
                computers += list[i].innerHTML;
                var all = computers.toString();
                document.getElementById("demo").innerHTML = all;
            }
        }
        </script>
    </head>
<body onload="showLi();">
    <p id="demo"></p>
    <ul>
        <li>Mac</li>
        <li>PC</li>
        <li>Linux</li>
    </ul>
</body>
</html>
0
Amit Verma 24 czerwiec 2021, 22:19