Collect List Items Task in HTML with DOM and JavaScript

Write a JS function that scans a given HTML list and appends all collected list items’ text to a text area on the same page when the user clicks on a button.

Input/Output:
There will be no input/output, your program should instead modify the DOM of the given HTML document.

Sample HTML:

<ul id="items">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
<textarea id="result"></textarea>
<br>
<button onclick="extractText()">Extract Text</button>
<script>
  function extractText() {
    // TODO
  }
</script>

Examples:

1 Answer

Here is the solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul id="items">
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>

<textarea id="result"></textarea>
<br>
<button onclick="extractText()">Extract Text</button>

<script>
    function extractText() {
        let items = document.querySelectorAll("#items li");
        let result = document.getElementById("result");
        for (let li of items) {
            result.value += li.textContent + "\n";
        }
    }
</script>
</body>
</html>

answered by user hues

Q: Collect List Items Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Collect List Items Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions