Есть проблемы при создании генерации случайного числа

Question

Решил я сделать генератор случайных чисел, есть 2 input'а, куда пользователь вводит min и max, после нажимает на сгенерировать и ему выдается случайное число в диапазоне тех цифр, которые он ввёл. Так вот проблема в том, что нужно проверять, если пользователь ввёл одинаковые числа, то max нужно прибавлять на единицу, если пользователь ввёл, что min больше, чем max, то max нужно сделать таким же числом, как min и добавить единицу. Вот то, что сделал я:

let inp1 = document.querySelector('.inp1')
let inp2 = document.querySelector('.inp2')
let btn = document.querySelector('.btn')
let out = document.querySelector('.out')

btn.addEventListener('click', randomNumber)

function randomNumber (min, max) {
    min = inp1.value;
    max = inp2.value;

    if (inp1.value == inp2.value) {
        inp2.value++
    } else if (inp1.value > inp2.value) {
        inp2.value = parseInt( inp1.value + 1)
    }

    out.innerHTML = Math.floor(Math.random() * (max - min) + min)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #141414;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.input {
    margin: 20px 0;
}

.out {
    color: #fff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="out">0</div>
        <div class="input">
          <input type="number" class="inp1">
          <input type="number" class="inp2">
        </div>
        <button class="btn">Сгенерировать</button>
      </div>
    

    <script src="app.js"></script>
</body>
</html>

Answer 1

function randomNumber (inp1, inp2) {
    min = inp1.value;
    max = inp2.value;

    if (min == max) {
        max++
    } else if (min > max) {
        max = min
        max++
    }

    out.innerHTML = Math.floor(Math.random() * (max - min) + min)
}

Вы в min и max записали значение inp1 и inp2, а потом в if'ах меняете значение inp1 и inp2, а не min и max

И думаю если min > max то лучше просто их поменять местами:

else if (min > max) {
        max, min = min, max
    }

Answer 2

Проблема в

inp1.value + 1

Так как inp1.value — строка, оператор + — это конкатенация строк.
Необходимо привести строку к числу.
Например:

inp2.value = parseInt(inp1.value, 10) + 1

Или:

inp2.value = +inp1.value + 1

Вторая проблема в ранней инициализации переменных min и max.
Это нужно делать после валидации и изменений значений в полях ввода.

Теперь взглянем на сравнение:

inp1.value > inp2.value

Мы сравниваем строки, они сравниваются лексикографически.
Т.е. '2' > '19'. Для корректного сравнения, нужно привести их к числам.

Так как, мы теперь пришли к слишком большому количеству преобразований, делаем шаг назад и вводим переменные с числами в самом начале, модифицируем их и кладём результаты преобразования обратно.

Ещё: btn.addEventListener('click', randomNumber) передаёт в randomNumber объект события. Нужно либо явно передать нужные вам аргументы
btn.addEventListener('click', () => randomNumber(inp1.value, inp2.value))
либо параметры в определении функции бесполезны(вам всё равно приходится ходить в поля ввода за данными)

Также, я добавил +1 к генерации числа, чтобы включать значение во втором поле.

let inp1 = document.querySelector('.inp1')
let inp2 = document.querySelector('.inp2')
let btn = document.querySelector('.btn')
let out = document.querySelector('.out')

btn.addEventListener('click', randomNumber)

function randomNumber() {
  let [min, max] = [+inp1.value, +inp2.value]; // Формируем числа
  if (min == max) { // Валидация, модификация
    max++
  } else if (min > max) {
    max = min + 1
  }
  [inp1.value, inp2.value] = [min, max] // Обновляем поля ввода

  out.innerHTML = Math.floor(Math.random() * (max - min + 1)) + min
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #141414;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.input {
  margin: 20px 0;
}

.out {
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="wrapper">
    <div class="out">0</div>
    <div class="input">
      <input type="number" class="inp1">
      <input type="number" class="inp2">
    </div>
    <button class="btn">Сгенерировать</button>
  </div>


  <script src="app.js"></script>
</body>

</html>

БЛОГ НА HUSL

Есть проблемы при создании генерации случайного числа

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