如何将输入框值作为函数参数？随机数生成异常问题排查与解决

嘿，我看到你的问题啦！咱们一步步找出问题并解决它：

核心问题分析 #

你遇到的问题根源在于两个关键点：

1. 输入框类型不规范：你写的<input type="input">是错误的，HTML里并没有input这个输入框类型，虽然浏览器可能会默认当成文本框处理，但这会带来不可预期的风险，应该改成标准的type="text"。
2. 字符串与数字的类型混淆：从输入框获取的value属性值是字符串类型，直接用于数学运算时，虽然减法会自动隐式转换为数字，但最后一步的加法操作会触发字符串拼接逻辑——这就是为什么你输入min=2、max=5时，得到的是0-3而不是2-5的原因。

解决方案 #

我们只需要做两个关键修改：

• 修正输入框的type属性为text；
• 在传递参数时，显式将输入框的值转换为数字类型（可以用parseInt()、Number()或者一元+运算符来实现）。

修改后的完整代码 #

<html>
<head>
</head>
<body>
  <input type="button" value="Get random number" onclick="getRandomNumber(parseInt(document.getElementById('min').value), parseInt(document.getElementById('max').value))">
  <input type="text" id="min" placeholder="min">
  <input type="text" id="max" placeholder="max">
  <script>
    var p = document.createElement("p");
    document.body.appendChild(p);
    function getRandomNumber(min, max) {
      // 额外加个参数校验，避免无效输入导致的异常
      if (isNaN(min) || isNaN(max) || min > max) {
        p.innerHTML = "请输入有效的数字，且最小值不能大于最大值！";
        return;
      }
      p.innerHTML = Math.floor(Math.random() * (max - min + 1) + min);
    }
  </script>
</body>
</html>

额外优化说明 #

我还加了简单的参数校验逻辑，防止用户输入非数字或者最小值大于最大值的情况，这样能避免出现奇怪的计算结果，提升使用体验。

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