Html - how to using unique id getElementsByClassName for creating id ul and li tag each word from textarea

RebazXoshnaw
December 10, 2023
155 views
3 votes
3 Answers

Words For each space make ul have a new class
Then put the word inside li By clicking on the button

<!DOCTYPE html>

<head>

</head>

<body>

  <textarea id ="myArea"class="rebaz"rows=4 cols=50>hello my name is rebaz</textarea>
 <button onclick="show();">Show content</button>
 
 <script>

let contextMenu = document.getElementsByClassName("word id")[0];
 </script>
</body>
<script src="./main.js" type="text/javascript"></script>
 <script src="cheack.js"></script>
</html>

after click button Crete dynamically this ul and li

<ul class="word1">
    <li>hello</li>
   </ul>
    <ul class="word2">
    <li>my</li>
   </ul>
    <ul class="word3">
    <li>name</li>
   </ul>
    <ul class="word4">
    <li>is</li>
   </ul>
    <ul class="word5">
    <li>rebaz</li>
   </ul>

Tags: html javascript

Answers

<!DOCTYPE html>
<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>
    <textarea id ="myArea"class="rebaz"rows=4 cols=50>hello my name is rebaz</textarea>
    <button onclick="show();">Show content</button>
    <ul id="showText"></ul>
 
 
 <script defer>
 function show(){
   let selectUL = document.getElementById('showText');
   let AllText=document.getElementById("myArea").value;

   const text = AllText.split(" ")
   
   selectUL.innerHTML=""
   text.map((item)=>{
       var li = document.createElement('li');
             li.innerText = item;
             selectUL.appendChild(li);
     });
   }
 </script>
 
</body>
</html>

Try it this way

<!DOCTYPE html>
<html>
<head>
    <title>Word Splitter</title>
</head>
<body>
    <textarea id="myArea" class="rebaz" rows="4" cols="50">Hello! my name is Anshu</textarea>
    <button onclick="show();">Show content</button>

    <script>
        function show() {
          // remove existing ul elements if any
          let uls = document.getElementsByTagName('ul');
            while (uls.length > 0) {
                uls[0].parentNode.removeChild(uls[0]);
            }

            let text = document.getElementById('myArea').value;
            let words = text.split(' ');
            for (let i = 0; i < words.length; i++) {
                let ul = document.createElement('ul');
                ul.className = 'word' + (i + 1);
                let li = document.createElement('li');
                li.textContent = words[i];
                ul.appendChild(li);
                document.body.appendChild(ul);
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

  <textarea id ="myArea"class="rebaz"rows=4 cols=50>hello my name is rebaz</textarea>
 <button onclick="show();">Show content</button>
 
 <script>
    function show(){
      let textArea = document.querySelector("#myArea");
      let body = document.querySelector("body")
      let words = textArea.value.split(" ");
      // now loop through all words and create ul for each word
      let count = 1;
      words.forEach((word)=>{
        let ul = document.createElement("ul");
        ul.setAttribute("id",`word${count}`)
        ul.innerHTML = `<li> ${word} </li>`
        //add element ul to body
        body.appendChild(ul)
        //increase count
        count++;
        
      })
    }
 </script>
</body>
<script src="./main.js" type="text/javascript"></script>
 <script src="cheack.js"></script>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to using unique id getElementsByClassName for creating id ul and li tag each word from textarea

Answers