Repeat Javascript result for each Array Div

Question

I have scanned stackoverflow all over for a solution regarding my query and resulted in posting a question. Please could someone assist me, my skill sets sit in PHP and I am not 100% fluent in JS/jQuery.

My code below allows for the div text to be shorted if more than 8 characters.

<div id="theText">Very long text here</div>

<script>
function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 8;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('theText'); 
</script>

However I am now trying to do this on multiple Div as per the below code, I think the method I should be using is arrays, below is a none working version but the concept where I am looking for guidance.

Any help is appreciated.

<div id="theText[]">Very long text here</div> 
<div id="theText[]">Even more long text here</div> 

<script>
function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 8;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('theText[]'); 
</script>

Matthew · Accepted Answer · 2021-01-26 06:58:46Z

I think Ken Lee answered the question correctly, but I think OP is wanting to take a more dynamic approach, in which case I'd recommend moving away from IDs and into classes as they (classes) lend themselves better to iteration, as shown below:

<div class="longText">Very long text here</div>
<div class="longText">Very long text here as well</div>
<div class="longText">And the text here is even longer</div>
<script>
function cutString(element){    
     var text = element.innerText; // We fetch innerText to omit any HTML from the length check       
     var charsToCutTo = 8;
     if(text.length>charsToCutTo){
         var strShort = "";
         for(i = 0; i < charsToCutTo; i++){
             strShort += text[i];
         }
         element.title = text; // we set the value of title to allow tooltip hovering of full text
         element.innerText = strShort + "...";
     }            
}

var longTextElems = document.getElementsByClassName('longText'); // This will return a collection of HTML elements
console.log(longTextElems.length);
for(count = 0; count < longTextElems.length; count++) {
    cutString(longTextElems.item(count));
}
</script>

I've included a JSFiddle

Alternatively, if you are looking for basic width-based elipsis, CSS3 already caters for this: Ellipsis Overflow

Ken Lee · Accepted Answer · 2021-01-11 08:16:12Z

0

One of the methods is to specify the index of the array (0,1,2...)

So in your case, you have theText[0] and theText[1] to process.

This is the code which is working:

<div id="theText[0]">Very long text here</div> 
<div id="theText[1]">Even more long text here</div> 

<script>
function cutString(id){    
     var text = document.getElementById(id).innerHTML;         
     var charsToCutTo = 8;
        if(text.length>charsToCutTo){
            var strShort = "";
            for(i = 0; i < charsToCutTo; i++){
                strShort += text[i];
            }
            document.getElementById(id).title = "text";
            document.getElementById(id).innerHTML = strShort + "...";
        }            
     };
cutString('theText[0]'); 
cutString('theText[1]'); 
</script>

edited Jan 11, 2021 at 8:16

answered Jan 11, 2021 at 8:05

Ken Lee

8,3953 gold badges14 silver badges34 bronze badges

1 Comment

Dot Gaming Over a year ago

Hi @ken thanks for your reply, this is great. Long term is to have the div replaced with SQL echo which means there could be more than 2 results, so ideally I would like to expand on the JS to perform this on each array div instead of static/hard code but your method/comment is appreciated.

Collectives™ on Stack Overflow

Repeat Javascript result for each Array Div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related