如何在textarea中按指定次数生成带序号的重复文本？

需求：通过input输入框设置重复次数，在textarea中以「Hello World(序号)」格式显示多行文本，输入3时应显示3行分别带1、2、3序号的内容，但当前代码仅显示最后一行。

原代码：

<input onchange="dup()" type="number" id="inp">
<br>
<br>
<textarea id="txtarea"></textarea>
<script>
    function dup(){
        var num = document.getElementById("inp").value;
        for (let i = 0; i < num; i++){
            document.getElementById("txtarea").innerHTML = "Hello World("+num+")"
        }

    }
</script>

错误分析： #

• 循环内每次直接赋值innerHTML会覆盖之前的内容，应该用累加操作+=
• 序号错误使用了总次数num，应该用i+1（循环变量i从0开始，加1才是正确的序号）
• 操作textarea内容应使用value属性，而非innerHTML，这是更规范的做法

修正后的代码： #

<input onchange="dup()" type="number" id="inp">
<br>
<br>
<textarea id="txtarea"></textarea>
<script>
    function dup(){
        var num = document.getElementById("inp").value;
        // 先清空textarea，避免重复触发时叠加旧内容
        let textarea = document.getElementById("txtarea");
        textarea.value = "";
        for (let i = 0; i < num; i++){
            // 累加内容，每行末尾加换行符实现多行显示
            textarea.value += `Hello World(${i+1})\n`;
        }
        // 可选：移除最后一行多余的换行符
        // textarea.value = textarea.value.trimEnd();
    }
</script>

内容的提问来源于stack exchange，提问作者Rob