简易计算器应用中Clear按钮关联函数无法触发问题

使用HTML、CSS和JavaScript开发简易计算器时，遇到Clear按钮无法触发关联函数的问题。目前displayAppend函数点击可正常工作，但点击“C”按钮时clear函数未触发，函数内的console.log语句也未在控制台输出。已完成以下排查：

• 确认calc.js文件正确链接加载
• 检查clear函数定义正确
• 确保HTML按钮onclick属性设置无误

相关代码：

JavaScript代码 #

let disp = document.querySelector("#display");

function displayAppend(a) {
  disp.value += a;
}

function clear() {
  console.log("hi");
  disp.value = "";
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="calculator">
    <input id="display" readonly>
    <div id="key-container">
      <button onclick="displayAppend('+')" class="keys orange">+</button>
      <button onclick="displayAppend('7')" class="keys">7</button>
      <button onclick="displayAppend('8')" class="keys">8</button>
      <button onclick="displayAppend('9')" class="keys">9</button>
      <button onclick="displayAppend('-')" class="keys orange">-</button>
      <button onclick="displayAppend('4')" class="keys">4</button>
      <button onclick="displayAppend('5')" class="keys">5</button>
      <button onclick="displayAppend('6')" class="keys">6</button>
      <button onclick="displayAppend('*')" class="keys orange">*</button>
      <button onclick="displayAppend('1')" class="keys">1</button>
      <button onclick="displayAppend('2')" class="keys">2</button>
      <button onclick="displayAppend('3')" class="keys">3</button>
      <button onclick="displayAppend('/')" class="keys orange">/</button>
      <button onclick="displayAppend('0')" class="keys">0</button>
      <button onclick="displayAppend('.')" class="keys">.</button>
      <button onclick="Calculate()" class="keys">=</button>
      <button onclick="clear()" class="keys orange">C</button>
    </div>
  </div>
  <script src="calc.js"></script>
</body>

</html>

问题根源是你定义的函数名clear与浏览器内置的document.clear()方法冲突。在按钮的onclick属性中调用clear()时，浏览器会优先执行内置的document.clear()，而非你编写的全局函数，导致你的代码未被触发。

有两种解决方式：

• 重命名函数：将你的函数名改为不冲突的名称，比如clearDisplay，同时同步修改HTML中的调用：

  // 修改后的JS函数
  function clearDisplay() {
    console.log("hi");
    disp.value = "";
  }
  

  <!-- 修改后的HTML按钮 -->
  <button onclick="clearDisplay()" class="keys orange">C</button>
  

• 明确指定全局作用域：在onclick中直接调用全局作用域下的clear函数，即window.clear()：

  <button onclick="window.clear()" class="keys orange">C</button>
  

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