I'm new to javascript and I want to know how to loop these two codes

Question

I have a text area, and I want to display the number of lines in real time. So I came up with these code

    
    var count = document.getElementById('ccs').value.split("\n").length;
    document.getElementById("count").innerHTML = count;

 <p id="count"></p>
<textarea class="" id="ccs" rows="15" wrap="off" style="resize: none; overflow: auto; width:100%" placeholder="Text"></textarea>

How do I loop my script?

what do you mean by loop your script? loop over... the count element? Loop over numbers from 1 to 10? What have you tried? — Jhecht, Aug 05 '19 at 01:41
You mean you want to update #count with the number of rows in the textarea as someone types in some text ? — François Huppé, Aug 05 '19 at 01:47
your code seems ok to count the number of rows and display it, now you wanna look to include an event listener, to execute your code each time the textarea is changed. look for onchange event, or maybe keydown event. — François Huppé, Aug 05 '19 at 01:50
possible [duplicate.](https://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea) — Christian Carrillo, Aug 05 '19 at 01:51

Christian Carrillo · Accepted Answer · 2019-08-05T15:16:52.250

This works:

// assigning variables to DOM elements
var $css = document.getElementById('ccs');
var $count = document.getElementById('count');

// adding listener to <textarea id="css"> that is saved
// on $css variable, this listener will execute a 
// anonymous function everytime that the input event on
// textarea has been done
$css.addEventListener('input', function() {
  // inserting on <p id="count"> using $count variable
  // as html the content of:
  // 1. "this" is refering to $css
  // 2. ".value" is taking the current textarea value as string
  // 3. ".split('\n')" is splits the current string value  
  // into substrings using ("\n") as separator to 
  // determine where to make each split.
  // 4. ".length" is counting substrings
  $count.innerHTML = this.value.split("\n").length
})

<p id="count"></p>
<textarea class="" id="ccs" rows="15" wrap="off" style="resize: none; overflow: auto; width:100%" placeholder="Text"></textarea>

Your answer as been accepted but you just put code on it. Please add some explanation to create a valid stack answer — Arthur, Aug 05 '19 at 13:15

score 1 · Answer 2 · answered Aug 05 '19 at 01:53

You have to use Javascript Events in order to call a function everytime something append (When textarea's value is updated)

document.addEventListener("DOMContentLoaded", function(event) { 
  
  // Get refs
  const textarea = document.getElementById('ccs')
  const count = document.getElementById("count")
 
  // Define a function
  const countLines = () => {
    var lines = textarea.value.split("\n").length;
    count.innerHTML = lines;
  }
  
  // Call it on start
  countLines();
  // Call it everytime textarea's value change
  textarea.addEventListener('change', countLines);

})

<p id="count">-</p>
<textarea class="" id="ccs" rows="15" wrap="off" style="resize: none; overflow: auto; width:100%" placeholder="Text"></textarea>

i don't sure, when i published response instantly i had downvote too — Christian Carrillo, Aug 05 '19 at 02:04

I'm new to javascript and I want to know how to loop these two codes

2 Answers2