制作Web简易加减器时遇JavaScript无法获取输入值存入变量问题求助

嘿，我一眼就看出问题出在哪了，咱们来一步步修复它：

核心问题分析 #

• 变量获取时机不对：你现在是在页面刚加载时就把输入框的值赋给val1和val2，这时候用户还没输入任何内容，这两个变量会一直保持初始的空值，点击按钮时也不会去读取最新的输入内容。
• 类型转换问题：输入框返回的value是字符串类型，直接用+运算会变成字符串拼接（比如输入1和2，会得到"12"而不是3），减号虽然会自动转换类型，但最好统一处理成数值更稳妥。

修正后的代码 #

HTML代码（修复了多余的闭合标签） #

<div class="container"> 
  <h1>Adder and Subtractor</h1> 
  <span id="results">0</span><br> 
  <input type="number" id="val1"><br> 
  <input type="number" id="val2"><br> 
  <button class="btn minus">-</button> 
  <button class="btn plus">+</button> 
</div>

JavaScript代码（调整变量获取时机+类型转换） #

let count = 0; 
let showResult = document.querySelector('#results'); 
const btn = document.querySelectorAll('.btn'); 

btn.forEach(function (btns) { 
  btns.addEventListener('click', function(e){ 
    // 每次点击按钮时才读取输入框的最新值，并转换为数值类型
    let val1 = Number(document.getElementById('val1').value); 
    let val2 = Number(document.getElementById('val2').value); 

    const styles = e.currentTarget.classList; 
    if (styles.contains('minus')){ 
      count = val1 - val2; 
    } else { 
      count = val1 + val2; 
    } 
    showResult.textContent = count; 
  }) 
})

额外提示 #

如果用户没输入内容就点击按钮，Number('')会返回0，如果你想处理这种情况（比如提示用户输入数字），可以加个简单的判断：

if (isNaN(val1) || isNaN(val2)) {
  showResult.textContent = "请输入有效数字";
  return;
}

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