View Full Version : how to count number of <br> in innerHTML/ click addmore clear content of other fields

09-05-2010, 12:28 AM
I wish to know how I can count how many lines there are by searching the innerHTML of a div

can anyone suggest how this can be done?

also when the new line is added in my code it clears the content of all the existing fields if there was anything in them before the add link was clicked

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function addmore() {
// count existing boxes to find out next number to use.
// ?

document.getElementById('namesdiv').innerHTML += '<textarea name="name_added" cols="30" rows="2"></textarea><br>';
document.getElementById('addressesdiv').innerHTML += '<textarea name="address_added" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile_added" cols="30" rows="2"></textarea><br>';

<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<textarea name="name1" cols="30" rows="2"></textarea><br>
<textarea name="name2" cols="30" rows="2"></textarea><br>
<textarea name="name3" cols="30" rows="2"></textarea><br>
<textarea name="name4" cols="30" rows="2"></textarea><br>
<textarea name="name5" cols="30" rows="2"></textarea><br>
<div id="addressesdiv" style="float: left; padding-right: 10px;">Client's Addresses<br>
<textarea name="address1" cols="30" rows="2"></textarea><br>
<textarea name="address2" cols="30" rows="2"></textarea><br>
<textarea name="address3" cols="30" rows="2"></textarea><br>
<textarea name="address4" cols="30" rows="2"></textarea><br>
<textarea name="address5" cols="30" rows="2"></textarea><br>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<textarea name="mobile1" cols="30" rows="2"></textarea><br>
<textarea name="mobile2" cols="30" rows="2"></textarea><br>
<textarea name="mobile3" cols="30" rows="2"></textarea><br>
<textarea name="mobile4" cols="30" rows="2"></textarea><br>
<textarea name="mobile5" cols="30" rows="2"></textarea><br>
<br style="clear: both;">
<a href="" onClick="javascript:addmore(); return false;" >Add more</a>


Philip M
09-05-2010, 11:42 AM
You can only count the number of line breaks entered by the user (and there may or may not be one or more newlines entered by the user after the final text line). You can't count the lines caused by wrapping.

Convert all the newline in the textarea to the HTML line breaks (<br>). Split the text in an array with <br> and then take the length of the array.

<textarea id = "txt1" rows = "10" cols = "50">Lorem ipsum dolor sit amet, consectetur.
Etiam ipsum leo, scelerisque at dapibus ac,
consectetur vel ipsum.
Morbi et metus
ut diam molestie ullamcorper semper
semper. Donec volutpat neque in lorem tempus
scelerisque. Curabitur dignissim rhoncus
Nullam nec sapien arcu, eget cursus lorem.
<input type = "button" value = "How many lines?" onclick = "countLines()">
<input type = "text" id = "result">

<script type = "text/javascript">
function countLines() {
var x = document.getElementById("txt1").value;
var xArray = [];
x = x.replace(/\n/g,"<br>");
var xArray = x.split("<br>");
var len = xArray.length-1;
document.getElementById("result").value = len;

Quizmaster: In America, what liquid normally comes out of a faucet?
Contestant: Cheese.