Question 302528 in Html Question posted in
Some basic documentation can be found here.

Html – How to move words from the textAraea to each in the 'ol' element, JavaScript

The first word in the textarea should enter class "word1" with append tag ‘li’, then the second word should enter class "word2" with tag ‘li’ and the other words in the same order
if no more word from textarea class ol should be emtty

<!DOCTYPE html>

<head>

  
</head>

<textarea class="rebaz"rows=4 cols=50>hello my name is rebaz</textarea>
<button onclick="show();">Show content</button>
<ol class = "word1"></ol>
<ol class = "word2"></ol>
<ol class = "word3"></ol>
<ol class = "word4"></ol>
<ol class = "word5"></ol>
<ol class = "word6"></ol>
   

 
</body>


</html>

after click button

<ol class = "word1"><li>hello</li></ol>
<ol class = "word2"><li>my</li></ol>
<ol class = "word3"><li>name</li></ol>
<ol class = "word4"><li>is</li></ol>
<ol class = "word5"><li>rebaz</li></ol>
<ol class = "word6"></ol>
Tags:

4

Answers


  1. 0

    You may have a javascript function that will split words from the textarea value and will create a new li element for each one of them to be appended to the corresponding ol element selected by its class.

    I should point out that if the textarea contains more than 6 words, the 7th and counting will be ignored. That’s by design according to your requirements. I should also warn that doing lists with single items is pretty meaningless. Just as a reminder, ol stands for ordered list and li stands for list item.

    function show(){
  const source = document.getElementById('textarea');
  const words = source.value.split(' ');
  words.forEach((word, i) => {            
    const li = document.createElement('li');
    li.textContent = word;
    document.querySelector(`.word${i+1}`)?.append(li);    
  });
}
    <textarea id="textarea" class="rebaz" rows=4 cols=50>hello my name is rebaz</textarea>
<button onclick="show();">Show content</button>
<ol class = "word1"></ol>
<ol class = "word2"></ol>
<ol class = "word3"></ol>
<ol class = "word4"></ol>
<ol class = "word5"></ol>
<ol class = "word6"></ol>
    Login or Signup to reply.
  2. 0

    You can do insertAdjacentHTML

    function show() {
  const textarea = document.querySelector('textarea.rebaz');
  const value = textarea.value;
  const split = value && value.split(' ');
  if (split && split.length) {
    split.forEach((item, index) => {
      textarea.insertAdjacentHTML("afterEnd", `<ol class = "word${index}">${item}</ol>`);
    });
  }
}
    <textarea class="rebaz" rows=4 cols=50>hello my name is rebaz</textarea>
<button onclick="show();">Show content</button>
    Login or Signup to reply.
  3. 0

    You can use javascript’s trim, split, getElementsByClassName, and appendChild methods to solve this. The trim method is useful for removing the extra whitespace in the textarea.

    In the show method, you can first grab the textarea tag by-

    const textarea = document.getElementsByClassName("rebaz")[0];

    There getElementsByClassName gives an array type data structure. So, you need to write [0] to get the first element. After grabbing the textarea you can trim the text inside it and split it based on space (‘ ‘).

    const words = textarea.value.trim().split(" ");

    It will return an array containing words. These words can be inserted into the ol tag.

    The show function can be written as-

    function show() {
    // grabbing the textarea
    const textarea = document.getElementsByClassName("rebaz")[0];
    // trim the text before the split
    const words = textarea.value.trim().split(" ");

    words.forEach((word, idx) => {
      // getting the ol tag
      const ol = document.getElementsByClassName(`word${idx + 1}`);
      // check if the ol tag exists in the html
      if (ol.length > 0) {
        // creating a empty li tag
        const li = document.createElement("li");
        // setting the word inside the li tag
        li.innerText = word;
        // appending the li tag into the ol container
        ol[0].appendChild(li);
      }
    });
  }

    You can use a single ol tag and multiple li tags inside it. The li tag will represent each of the words. I think it will make more sense instead of using multiple ol tags.

    The HTML can be written as-

    <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Used id -->
    <textarea class="rebaz" id="rebaz" rows="4" cols="50">
      hello my name is rebaz
    </textarea>
    <button onclick="show();">Show content</button>
    <ol id="ol-container"></ol>

    <script>
      function show() {
        // grabbing the textarea
        const textarea = document.getElementById("rebaz");
        // trim the text before the split
        const words = textarea.value.trim().split(" ");

        // grabbing the ol container where the li tags will be appended
        const olContainer = document.getElementById("ol-container");

        words.forEach((word, idx) => {
          // creating an empty li tag
          const li = document.createElement("li");
          // giving a class name to the li tag
          li.classList.add(`word${idx + 1}`);
          // setting the word inside the li tag
          li.innerText = word;
          // appending the li tag into the ol container
          olContainer.appendChild(li);
        });
      }
    </script>
  </body>
</html>
    Login or Signup to reply.
  4. 0

    I hope this logic solve your problem please try it:

    function show() {
        var textareaContent = document.querySelector('.rebaz').value;
        var words = textareaContent.split(' ');

        for (var i = 0; i < words.length; i++) {
            var olClass = "word" + (i + 1);
            var li = document.createElement('li');
            li.textContent = words[i];

            document.querySelector('.' + olClass).appendChild(li);
        }
    }
    li{list-style: none;}
    ol{background-color: antiquewhite;padding: 10px;}
    <textarea class="rebaz" rows="4" cols="50">hello my name is rebaz</textarea>
  <button onclick="show()">Show content</button>
  <ol class="word1"></ol>
  <ol class="word2"></ol>
  <ol class="word3"></ol>
  <ol class="word4"></ol>
  <ol class="word5"></ol>
  <ol class="word6"></ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search