инспекция кода random'айзера

251

14 апреля 2022, 17:20

Данный код генерирует числа из введённого диапазона. Можете показать на ошибки в коде, и как его можно улучшить.

function rand(){
let num = Math.random()
let maxval = max.value
let minval = min.value
label.innerHTML = Math.round(num * (maxval - minval) + minval)
}

body{
background: linear-gradient(90deg, red, blue);
}
table{
width: 50%;
height: 50%;
margin: 25%;
}
input{
width: 100%;
height: 100%;
}
label{
width: 100%;
height: 100%;
}
button{
width: 100%;
height: 100%;
}

<table>
<tr><th><input id="min" valuetype="number" ></th></tr>
<tr><th><input id="max" valuetype="number" ></th></tr>
<tr><th><label id="label" >0</label></th></tr>
<tr><th><button onclick="rand()">generate</button></th></tr>
</table>

Answer 1

Можно использовать flex-box для разметки.
Использовать функцию как инструмент для получения числа от min до max, а не для получения и вывода в конкретное место.
Добавить проверки для пустых полей
Слушать нажатие на кнопку в javascript, а не в атрибутах html, js для логики, html для отображения.

const label = document.querySelector('.result');
const button = document.querySelector('.button');
button.addEventListener('click', () => {
  const min = document.querySelector('.min').value;
  const max = document.querySelector('.max').value;
  if (min !== '' && max !== '') {
    label.innerHTML = randomize(min, max);
  };
});
function randomize(min, max) {
  const random = Math.random(min, max);
  return Math.round(random * (max - min) + max);
};

body {
  background: linear-gradient(90deg, red, blue);
}
.form {
  width: 50%;
  height: 50%;
  margin: 25%;
  display: flex;
  flex-direction: column;
}
.result {
  color: #fff;
  font-size: 18px;
  font-family: sans-serif;
  text-align: center;
  margin: 5px 0;
}

<div class="form">
  <input type="number" class="min" />
  <input type="number" class="max" />
  <button class="button">Randomize</button>
  
  <div class="result"></div>
</div>