如何在Input文本框的Value中显示JavaScript函数的返回值

嘿，我帮你排查出几个导致功能失效的问题，咱们一个个来修正：

问题1：函数从未被触发执行 #

你定义了myFunction，但没有任何触发它运行的逻辑（比如点击按钮、输入框内容变化），所以代码永远不会执行，自然没法更新demo输入框的内容。

问题2：Input元素的内容设置方式错误 #

对于<input>标签，要修改它显示的内容，应该用value属性，而不是innerHTML——innerHTML是用来修改元素内部HTML结构的，input的输入值存在value属性里。

问题3：有效数字的判断逻辑有漏洞 #

原来的v && !isNaN(v)会把一些无效输入误判为有效：

• 空字符串""会被!isNaN("")判定为true（因为JS会把空字符串隐式转为数字0）
• 纯空格的字符串（比如" "）也会被误判为有效输入

我们需要优化判断条件，先清理输入内容的空格，再准确检查是否为有效数字。

修正后的完整代码 #

<body>
  <h2>JavaScript Can Validate Input</h2>
  <p>Please input a number </p>
  <input id="numb1" value="">
  <input id="numb2" value="">
  <input id="numb3" value="">
  <!-- 新增触发按钮，点击后执行统计逻辑 -->
  <button onclick="myFunction()">统计有效数字数量</button>
  <input id="demo" type="text" placeholder="有效数字数量将显示在这里">

  <script>
    function myFunction() {
      const inputs = ['numb1', 'numb2', 'numb3'];
      const z = inputs
        .map(id => document.getElementById(id).value.trim()) // 先去除输入内容的首尾空格
        .reduce((count, val) => {
          // 优化判断逻辑：非空内容 + 能转为有效数字
          if (val !== '' && !Number.isNaN(Number(val))) {
            return count + 1;
          }
          return count;
        }, 0);
      // 用value属性更新输入框显示内容
      document.getElementById("demo").value = z;
    }
  </script>
</body>

关键修改说明 #

• 新增了一个按钮，通过onclick="myFunction()"触发统计逻辑
• 把innerHTML改成value来更新输入框的显示内容
• 用trim()清理输入内容的首尾空格，避免纯空格被误判
• 用Number(val)显式转换字符串为数字，再用Number.isNaN判断（比全局isNaN更准确，不会进行隐式类型转换）
• 增加val !== ''的判断，彻底排除空输入的情况

这样修改后，点击按钮就能正确统计三个输入框里的有效数字数量，并显示在demo输入框里啦！

内容的提问来源于stack exchange，提问作者M.Saeed