Uncaught RangeError: Invalid string length in JavaScript

Question

I have a JavaScript function:

function addcontent(ele, text, lines, separate_lines){

    if(separate_lines){
    for(i=0; i<lines; i++){
      text=text+"\n"+text+"\n";
    }
  }

    else if(!separate_lines){
    for(e=0; e<lines; e++){
      text=text+text;
    }
  }

    ele.append(text);

  }

and when I use it for the onclick of an HTML Button like:

<button onclick="addcontent(document.body, 'A', 100, true)">
    Add content.
  </button>

I get this error in the Chrome console when I click the button:

Uncaught RangeError: Invalid string length at addcontent at HTMLButtonElement.onclick

I have no idea where I'm wrong.

Answer 1

The issue is that on each iteration you add the text two times, but you assign the result to text again.

• iteration 1: A + A = AA (but you assign to text) so
• iteration 2: AA + AA = AAAA
• iteration 3: AAAA + AAAA = AAAAAAAA
• iteration 4: AAAAAAAA + AAAAAAAA = AAAAAAAAAAAAAAAA
• etc

So it is exponential. You are basically doing 2^lines insertion of the text. You can guess that this creates a "quite" large string and it cannot be handled.

Use a different variable for the generated text.

function addcontent(ele, text, lines, separate_lines) {
  let finalText = text;
  if (separate_lines) {
    for (let i = 0; i < lines; i++) {
      finalText = finalText + "\n" + text;
    }
  } else {
    for (let e = 0; e < lines; e++) {
      finalText = finalText + text;
    }
  }

  ele.append(finalText);
}

<button onclick="addcontent(document.body, 'A', 100, true)">
        Add content.
</button>