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, please help.

Thanks in advance!

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>