change innerHTML using javascript substring

Question

I'm trying to make read more button using javascript substring but my code is not working, I can hide text but, can not show more on click

<p class="pr">More than 200</p>
<button class="btn">Read more</button>

<script>
  var pr = document.querySelectorAll('.pr');
  var btn = document.querySelectorAll('.btn');

  for (var i = 0; i < pr.length; i++) {
    if(pr[i].innerHTML.length >= 200){
      var showLess = pr[i].innerHTML.substring(0, 200);
      pr[i].innerHTML = showLess;
    }
    btn.addEventListener('click', showMore);

    function showMore(){
      var showMore = pr[i].innerHTML.substring(0, );
      pr[i].innerHTML = showMore;
    }
  }
</script>

When you change .innerHTML, it gets permanently changed. Try storing the original text in js or some hidden element and use that to manipulate .innerHTML. — Code0987
– Code0987, Commented Aug 30, 2019 at 11:00

Volper · Accepted Answer · 2019-08-30 10:51:37Z

1

Firstly, you should store the text inside a variable, because if you then shorten it, javascript doesn't remember the first text:

var text = pr[i].textContent; // make this the first thing in the for loop

Then, instead of referring to pr[i].innerHTML.substring use text.substring (only when getting the value, not when setting it).

I hope this will work, haven't tested it (writing on my phone).

answered Aug 30, 2019 at 10:51

Volper

6941 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gurami Nikolaishvili Over a year ago

Thank you for simple explain :)

Volper Over a year ago

This probably will not work for multiple texts though, because with each iteration of the loop, the variables change and it would only work for the last element.

Amardeep Bhowmick · Accepted Answer · 2019-08-30 11:09:38Z

You are overriding the innerHTML with the short string so you need to hold the original value in a variable. In my snippet I save the original string in the more variable.

Furthermore the document.querySelectorAll('.btn'); returns a NodeList object on which you cannot attach an event listener directly, you need to iterate through each node and add it to those.

In your code you were getting a TypeError on the addEventListener call so the callback was not attached to the click event.

Lastly, do not use the innerHTML use textContent as innerHTML is a costly operation. Read more here .

Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.

var pr = document.querySelectorAll('.pr');
var btn = document.querySelectorAll('.btn');

for(let i =0; i<pr.length; i++){
  let more = pr[i].textContent;
  if(more.length >= 5){
    let showLess = more.substring(0, 5);
    pr[i].textContent = showLess;
  }
  btn.forEach(b => b.addEventListener('click', () => {
     console.log(more);
     pr[i].textContent = more;
  }));
  
}

<p class="pr">More than 200</p>
<button class="btn">Read more</button>

Shail_bee · Accepted Answer · 2019-08-30 11:10:31Z

A simpler version using Id instead of class.

let pr = document.getElementById('pr');
let btn = document.getElementById('btn');
let actualText = pr.innerHTML; 
if(pr.innerHTML.length >= 200){
  pr.innerHTML =  pr.innerHTML.substring(0, 200);
  btn.addEventListener('click', () => { pr.innerHTML = actualText;});
}

<p id="pr">This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200, This is basic test content which length is More than 200</p>
<button id="btn">Read more</button>

And yes you need to store your original text content before updating the innerHTML of the element.

Collectives™ on Stack Overflow

change innerHTML using javascript substring

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related