2

Решил я сделать генератор случайных чисел, есть 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>

1 ответ 1

5

Проблема в

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>

3
  • а как исправить проблему, то что, если, min > max то равнять его с min и добавлять +1?
    – Alexey
    10 окт 2020 в 13:16
  • Понял о чём речь, дополнил ответ
    – vp_arth
    10 окт 2020 в 13:50
  • 1
    Спасибо тебе большое)
    – Alexey
    10 окт 2020 в 13:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.