主页 / 问题 / 1194139
Accepted
Danis
Asked:2021-10-23 06:41:29 +0000 UTC2021-10-23 06:41:29 +0000 UTC

随机器代码检查

  • 772

此代码从输入的范围生成数字。您可以指出代码中的错误以及如何改进它。

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>

html

1 个回答

  1. Best Answer
    1. 您可以使用flex-box进行布局。
    2. 将函数用作从minto获取数字的工具max，而不是用于获取和输出到特定位置的工具。
    3. 添加空字段检查
    4. 在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>

    • 2

相关问题