JavaScript两字段求和结果为字符串拼接而非数值相加问题修复

代码存在3处直接导致加法失效、触发字符串拼接的错误：

• DOM输入框的.value属性默认返回字符串类型，未做类型转换直接参与运算时，+运算符会优先执行字符串拼接而非数值加法
• parseInt传参错误：parseInt("inizio")是尝试解析固定字符串常量"inizio"，并未读取输入框内的用户输入，返回值永远为NaN
• 定义了变量numeroiniziale存储初始输入框的值，但后续计算完全没有使用该变量，属于无效代码

JavaScript 逻辑 #

function addFields(){
    // 读取输入值时直接转为十进制整数，传入10作为基数避免特殊值的解析异常
    var number = parseInt(document.getElementById("copie").value, 10);
    var startNum = parseInt(document.getElementById("inizio").value, 10);
    var container = document.getElementById("container");
    
    // 清空容器原有内容
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }

    // 非法输入拦截，避免非数字输入导致异常
    if (isNaN(number) || isNaN(startNum) || number < 1) {
        alert("请在两个输入框中填入有效正整数");
        return;
    }

    for (let i = 0; i < number; i++){
        container.appendChild(document.createElement("br"));
        container.appendChild(document.createTextNode("N° " + (i+1)));
        container.appendChild(document.createElement("br"));
        var input = document.createElement("input");
        input.type = "text";
        // 两个运算数均为数字类型，+运算符会正常执行加法
        input.placeholder = startNum + i + 1;
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}

HTML 结构（无需修改，可直接复用） #

Numero iniziale:<input type="text" id="inizio" name="inizio" value=""><br /> 
Quanti ne genero:<input type="text" id="copie" name="copie" value=""><br />
<a href="#" id="filldetails" onclick="addFields()">Genera</a>
<div id="container"></div>

• 所有从输入框读取的值第一时间通过parseInt(值, 10)转为整数，从类型层面彻底避免字符串拼接问题
• 修正parseInt的参数错误，不再解析固定字符串，直接传入读取到的输入框实际值
• 新增输入合法性校验，用户输入非数字、负数或0时给出提示，避免出现NaN类异常展示
• 循环变量使用let声明，避免全局变量污染
• 删除无效的冗余变量定义，逻辑更简洁

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