I never used Javascript before, but what I want to achieve is:
I have a div called Limited and I want any text to come to this div to output the first 300 characters only followed by (...) three dots.
Please can you give a code example since I am newb with this
function validateMyForm ( )
{
var elt = document.getElementById('limit');
if (elt.innerHTML.length > 20) {
elt.innerHTML = elt.innerHTML.slice(0,20) + "...";
}
}
OK what I am having trouble with is: it is working only on the first div and not on the others, I have like 14 div having the same id (limit) and I want it to upply to all of them?
Second thing can I make it like load with the page so the user don have to click a button for it to change?
getElementById() always return just one element, because you can't have duplicate ids in a valid html document. You could use the class + getElementsByClassName().
Thank you Weirdan,
I already did that but I am not able to get the innerHTML.length for that classes, I am not sure if I can get the innerHTML for a class? Here is my last code below:
getElemetsByClassName() returns a collection of elements, not a single element, so you need to iterate over the collection and apply the limiting function to each element:
It's quite easy to understand though:
limit() is a factory function, it returns a function that limits an element contents to the specified length. Then the function returned passed to .each() method of the jQuery object, containing the results of '.limit' selector (selects all elements that have limit class). .each() applies that function to every element of those results.