如何用JavaScript重置number类型输入框？计算器重置功能失效求助

你的自定义clear()函数没生效，核心原因是**clear是浏览器内置的全局方法**（对应document.clear()，用来清除文档内容），当你在内联onclick="clear()"里调用时，浏览器会优先触发内置方法，根本没执行你写的函数。

下面是两种可行的解决办法：

方法1：重命名自定义函数 #

把你的函数改成别的名字，避免和内置方法冲突，同时更新按钮的点击事件：

<!-- 更新按钮的onclick属性 -->
<button onclick="clearInputs()">Reset</button>

<script>
  // 重命名函数为clearInputs
  function clearInputs()
  {
    var length = document.getElementById('length');
    var height = document.getElementById('height');
    var width = document.getElementById('width');

    length.value = "";
    height.value = "";
    width.value = "";
  }
</script>

方法2：用事件监听替代内联onclick #

如果不想改函数名，可以通过JS绑定点击事件，绕开内联事件的作用域冲突：

原生JS实现 #

<!-- 移除按钮的内联onclick，给按钮加个id -->
<button id="resetBtn">Reset</button>

<script>
  function clear()
  {
    var length = document.getElementById('length');
    var height = document.getElementById('height');
    var width = document.getElementById('width');

    length.value = "";
    height.value = "";
    width.value = "";
  }

  // 绑定点击事件
  document.getElementById('resetBtn').addEventListener('click', clear);
</script>

jQuery实现（你已经引入了jQuery） #

<button id="resetBtn">Reset</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  function clear()
  {
    // 用jQuery简化选择和赋值
    $('#length, #width, #height').val('');
  }

  // 绑定点击事件
  $('#resetBtn').click(clear);
</script>

补充说明：你原本的清空逻辑是对的，number类型输入框设置value=""确实能清空内容，只是函数名冲突导致代码没被执行。

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