asked on

Count textual content of a div - Javascript

Hi All,

The following should check the textual length of a DIV with editable content. However, even though it is set to 10 chars it actions at 1 chars, and when I delete all the chars from the div it does not return it to the first state. Any ideas:

function LenCheckURL()
{

if (document.getElementById("editable").innerText > 10 )
{
document.getElementById("hid_URL_OK").value = 0;
document.getElementById('Icon8').src = "../../Local_Config/Skins/JS_Default/Gen_CP_Images/Yellow_2.gif";
}
else
{
document.getElementById("hid_URL_OK").value = 1;
document.getElementById('Icon8').src = "../../Local_Config/Skins/JS_Default/Gen_CP_Images/Yellow_2G.gif";
}
CheckFormParts();
}

-----------------------------------------------------------------------
<div id="editable" contenteditable="true" class="txtTitle_URL" onkeypress="LenCheckURL();" ></div>

leakim971

.innerText.length

Abiel de Groot

ASKER

No, I tried that one too.

It still actions on the first char not the 10th

A

leakim971

also you probably want to use onkeyup : https://jsfiddle.net/e1Lu8y2t/

Julian Hansen

When you say "Actions" what do you mean
You have 3 parts to your function

function ... () {
  if (text is > 10) {
    // part I
  } else { // text <= 10) {
   // part II
  }
  CheckFormParts();  // Part III
}

Open in new window

Part I fires if text > 10.
Part II fires if text <= 10
Part III fires regardless

SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Abiel de Groot

ASKER

Hi Michel,
I like your solution framework. However, I can't replicate it locally and must be missing something.

I have this:
---------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>

<script language="javascript">

const max = 10;
const path = "../../Local_Config/Skins/JS_Default/Gen_CP_Images/";
const CheckFormParts = () => {}
const hid = document.getElementById("hid_URL_OK");
document.getElementById("editable").addEventListener("keyup",function(e) {
hid.value = "";
const len = this.textContent.length;
if (len > 0) {
const moreThanMax = len > max;
hid.value = moreThanMax ? 0 : 1;
document.getElementById("Icon8").src = path + (moreThanMax ? "Yellow_2.gif" :"Yellow_2G.gif");
}

});

</script>

</head>
<body>

<div id="editable" contenteditable="true" class="txtTitle_URL" ></div>

<input id="hid_URL_OK" />
<img id="Icon8" />

</body>
</html>

Many thanks

Abiel M de Groot

Abiel de Groot

ASKER

@Julian

Sorry, the CheckFormParts() doesn't matter. I want it to either do action part one or part 2 depending on whether there are 10 chars or not.

Michel Plungjan

You need to have the script accessing the form element AFTER they have been declared.

Either copy the script to just before the </body> OR wrap the whole thing in

window.addEventListener("load",function() { 
  // code here
});

Open in new window

https://jsfiddle.net/mplungjan/w160r7ty/

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Abiel de Groot

ASKER

Hi All,

Got this working by simply changing > (greater than) < Less than
if (document.getElementById("editable").innerText.length < 10 )

And changing the event handler to oninput rather than onkeypress.

Kind regards to all.

A