javascript - 如何在两个用户输入数字（最小值，最大值）之间找到随机整数

Question

我正在尝试开发一个音乐制作随机化应用程序，并且我想在单击提交按钮时在用户输入的两个值（用户设置的最小值和最大值）之间生成一个随机整数。

我尝试混合使用以下函数，其中 min/maxBpm id 是 HTML 中的数字输入...

<tr>
    <td>Min. BPM</td>
    <td><input required type="number" name="minBpm" id="minBpm" />&nbsp;<span id="spnMinBpm"></span></td>
</tr>
<tr>
    <td>Max. BPM</td>
    <td><input required type="number" id="maxBpm" />&nbsp;<span id="spnMaxBpm"></span></td>
</tr>

JavaScript：

var minBpm, maxBpm;
document.addEventListener("DOMContentLoaded", function() {
    minBpm = document.getElementById("minBpm").value;
    maxBpm = document.getElementById("maxBpm").value;
    submitBtn = document.getElementById("submitBtn");

    $("#submitBtn").click = (function (){
        Math.floor(Math.random() * maxBpm) + minBpm;
    }

标签： javascriptjquery

Answer 1

您的逻辑几乎就在那里，但是它是 JS 和 jQuery 的奇怪组合。我建议坚持一个或另一个。

除了语法问题，您遇到的主要问题是您用来生成随机数的逻辑存在缺陷，因为它仅在最小值为1. 您需要修改它以使用任何两个随机整数。

这是一个jQuery实现：

jQuery($ => {
  let $minBpm = $('#minBpm');
  let $maxBpm = $('#maxBpm');

  $('.bpm-input').on('input', () => {
    let minBpm = parseInt($minBpm.val(), 10);
    let maxBpm = parseInt($maxBpm.val(), 10);

    if (minBpm && maxBpm) {
      let rndBpm = Math.floor(Math.random() * (maxBpm - minBpm + 1) + minBpm);
      console.log(rndBpm);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Min. BPM</td>
    <td>
      <input required type="number" class="bpm-input" name="minBpm" id="minBpm" />
      <span id="spnMinBpm"></span>
    </td>
  </tr>
  <tr>
    <td>Max. BPM</td>
    <td>
      <input required type="number" class="bpm-input" name="maxBpm" id="maxBpm" />
      <span id="spnMaxBpm"></span>
    </td>
  </tr>
</table>

作为参考，这里是使用纯 JS 代码的相同逻辑：

document.addEventListener("DOMContentLoaded", function() {
  let minBpmEl = document.querySelector('#minBpm');
  let maxBpmEl = document.querySelector('#maxBpm');

  document.querySelectorAll('.bpm-input').forEach(el => {
    el.addEventListener('input', e => {
      let minBpm = parseInt(minBpmEl.value, 10);
      let maxBpm = parseInt(maxBpmEl.value, 10);

      if (minBpm && maxBpm) {
        let rndBpm = Math.floor(Math.random() * (maxBpm - minBpm + 1) + minBpm);
        console.log(rndBpm);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Min. BPM</td>
    <td>
      <input required type="number" class="bpm-input" name="minBpm" id="minBpm" />
      <span id="spnMinBpm"></span>
    </td>
  </tr>
  <tr>
    <td>Max. BPM</td>
    <td>
      <input required type="number" class="bpm-input" name="maxBpm" id="maxBpm" />
      <span id="spnMaxBpm"></span>
    </td>
  </tr>
</table>