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.

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.

• javascript
• html
• function
• for-loop
• string-length

3 Answers 3

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>

It's the old Wheat and chessboard problem, the string is simply way too long.

You double the string for 100 times that's 2^100...

It works fine with say lines = 10

This problem can be resolved if you can do as:

text = (text + "\n").repeat(lines * 2);

function addcontent(ele, text, lines, separate_lines) {
  if (separate_lines) {
    text = (text + "\n").repeat(lines * 2);
  } else if (!separate_lines) {
    for (e = 0; e < lines; e++) {
      text = text + text;
    }
  }
  ele.append(text);
}

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

If you want to add new line in after A

function addcontent(ele, text, lines, separate_lines) {
  if (separate_lines) {
    text = `${text}<br>`.repeat(lines * 2);
  } else if (!separate_lines) {
    for (e = 0; e < lines; e++) {
      text = text + text;
    }
  }
  ele.innerHTML = text;
}

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