JS用setAttribute在计算结果生成后给文本框加前置文本（适配window.onload）

核心改造对齐 #

• 完全保留原有项目结构：脚本放置在页面head标签内，通过window.onload完成初始化绑定
• 严格满足格式要求：计算得到两数之和后，必须通过setAttribute方法为结果文本框赋值，最终显示为「(计算得出的数字)」格式
• 修复原代码的运行报错问题：解决原函数作用域嵌套导致的按钮点击找不到方法的问题

原代码存在的问题 #

• 原逻辑把add_number函数嵌套定义在setUpEvents内部，属于局部闭包函数，HTML按钮的内联onclick在全局作用域查找方法时无法访问到这个函数，点击按钮会直接抛出add_number is not defined的报错
• 原逻辑直接给结果文本框的value赋纯数字，没有按要求使用setAttribute实现带括号的格式输出

改造后完整代码 #

适配后的JavaScript #

function setUpEvents() {
  // 将计算方法挂载到全局作用域，保证内联事件能正常访问
  window.add_number = function() {
    var first_number = parseInt(document.getElementById("tb1").value.trim());
    var second_number = parseInt(document.getElementById("tb2").value.trim());
    // 输入非数字场景的兜底提示
    if (isNaN(first_number) || isNaN(second_number)) {
      document.getElementById("tb3").setAttribute("value", "(请输入有效数字)");
      return;
    }
    var result = first_number + second_number;
    // 按要求：生成纯数字计算结果后，使用setAttribute设置带格式的文本
    document.getElementById("tb3").setAttribute("value", `(${result})`);
  }
}

// 保留原有window.onload初始化结构
window.onload = function() {
  setUpEvents();
};

原有HTML结构（无需大改，直接复用） #

<div>
  <h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" name="b1" value="GO" onclick="add_number()">

实现逻辑校验 #

流程完全符合需求规则

• 先读取两个输入框的值，转成整数后相加得到纯数字结果
• 结果生成后，不直接操作DOM的value属性，而是调用setAttribute方法设置元素的value属性值，把左右括号拼到数字两侧输出
• 因为所有DOM操作都在window.onload回调中执行，脚本即使放在head标签内也不会出现DOM未加载完成的获取元素报错

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