Генератор случайного числа в диапазоне

Question

Есть скрипт, который по-идее берёт значения value из input и с помощью randInt() генерирует число. Далее выводит в консоль.

//
// randomInt
function randInt(min, max){
    let range = max - min;
    
    let rand = Math.floor(Math.random() * (range + 1));
    return min + rand;
}
//

(function() {
    // randomIntNumber

    const randomNumForm = document.forms.randomNum;
    const randomNumInputFrom = randomNumForm.elements.randInt;
    const randomNumInputTo = randomNumForm.elements.randInt;
    const generateButton = randomNumForm.elements.button;

    function generateRandomNum(e) {
        e.preventDefault();

        const numFromValue = randomNumInputFrom.value;
        const numToValue = randomNumInputTo.value;

        let res;

        res = randInt(numFromValue, numToValue);

        console.log(res);
    }

    generateButton.addEventListener('click', generateRandomNum);
}());

<div class="r-int-number">
                <h2>Случайное число</h2>
                <div class="content">
                    <form name="randomNum">
                        <label for="from-num">От</label>
                        <input type="number" name="randInt" id="from-num">
                        <label for="to-num">До</label>
                        <input type="number" name="randInt" id="to-num">
                        <button name="button">Сгенерировать!</button>
                    </form>
                </div>
            </div>

Почему вместо случайного числа от min до max я получаю 0?

Answer 1

Ошибка происходила, потому что у ваших input'ов одинаковое свойство name, и когда вы пытались получить input по его name, вы фактически получали массив из 2 значений. Присвоение уникальных свойств name исправляет ошибку. Так же обратите внимание, что в функцию randint вы передаете строку, и когда вы пытаетесь прибавить к строке число, то значение конкатанируются, чтоб работало нужно преобразовать сначала строку в число.

//
// randomInt
function randInt(min, max) {
  let range = max - min;


  let rand = Math.floor(Math.random() * (range + 1));
  return +min + rand;
}
//

(function() {
  // randomIntNumber

  const randomNumForm = document.forms.randomNum;
  const randomNumInputFrom = randomNumForm.elements.min;
  const randomNumInputTo = randomNumForm.elements.max;
  const generateButton = randomNumForm.elements.button;

  function generateRandomNum(e) {
    e.preventDefault();

    const numFromValue = randomNumInputFrom.value;
    const numToValue = randomNumInputTo.value;

    let res;

    res = randInt(numFromValue, numToValue);

    console.log(res);
  }

  generateButton.addEventListener('click', generateRandomNum);
}());

<div class="r-int-number">
  <h2>Случайное число</h2>
  <div class="content">
    <form name="randomNum">
      <label for="from-num">От</label>
      <input type="number" name="min" id="from-num">
      <label for="to-num">До</label>
      <input type="number" name="max" id="to-num">
      <button name="button">Сгенерировать!</button>
    </form>
  </div>
</div>

БЛОГ НА HUSL

Генератор случайного числа в диапазоне

Ответы (1 шт):