JS onclick函数问题：点击计算器等号按钮无法显示2*2计算结果

你的代码存在几个关键问题导致功能失效，下面逐一说明并给出修正方案：

核心错误点 #

• 元素获取语法错误：var a = #n1 不是合法的JavaScript语法，无法正确获取页面元素。必须使用document.getElementById()方法获取元素，再提取其文本内容并转换为数字类型。
• 变量与参数冲突：定义的myFunction(a,b)中，参数名和外部变量名重复，调用时会优先使用函数参数，而外部变量未正确赋值，导致计算失败。
• rel标签语法错误：<rel ="stylesheet"> 应为标准的<link rel="stylesheet" href="样式文件路径">（若无需样式可直接删除该行）。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<!-- 修正rel标签，无需样式可直接删除 -->
<link rel="stylesheet" href="">
</head>
<body>
<div class="calculator">
  <div class="screen"><p id="sum"><span id="n1">2</span> &#xd7 <span id="n2">2</span></p></div>

  <script>
    function myFunction() {
      // 动态获取数值并转换为数字类型
      var a = Number(document.getElementById('n1').textContent);
      var b = Number(document.getElementById('n2').textContent);
      return a * b;
    }
  </script>

  <div class="container-buttons">
    <div class="buttons">7</div>
    <div class="buttons">8</div>
    <div class="buttons">9</div>
    <div class="buttons division">&#xf7</div>
    <div class="buttons">4</div>
    <div class="buttons">5</div>
    <div class="buttons">6</div>
    <div class="buttons multiplication">&#xd7</div>
    <div class="buttons">1</div>
    <div class="buttons">2</div>
    <div class="buttons">3</div>
    <div class="buttons substraction">&#x2212</div>
    <div class="buttons">0</div>
    <div class="buttons">.</div>
    <div class="buttons equals">
      <input id="sum-answer" type="button" onclick="document.getElementById('sum').innerHTML=myFunction()" value="=">
    </div>
    <div class="buttons addition">+</div>
  </div>  
</div>
</body>               
</html>

关键修正说明 #

1. 调整数值获取逻辑：在myFunction内部动态获取n1和n2的文本内容，用Number()转换为数字，确保每次点击等号都能获取最新值。
2. 消除参数冲突：删除myFunction的参数，直接在函数内部处理数值获取，避免变量名混淆。
3. 简化onclick调用：调用myFunction()时不再传参，函数内部已完成数值处理。
4. 修复标签语法：将错误的rel标签改为标准格式。

修改后点击等号按钮，屏幕会正常显示2*2的计算结果。

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