英文:
My Javascript random function will not provide valid responses
问题
我正在使用JS和HTML制作一个简单的随机数生成器游戏。在这个游戏中，您可以设置您希望随机数在其中的最小和最大数字。
然而，在设置我的变量并记录结果时，出现了不可能的数字。例如，如果我将最小值设置为50，最大值设置为100，会出现像58650、16750或31450这样的答案。我注意到你设置的最小数字总是出现在最后。我已经尝试过更改格式和更改代码，但似乎没有起作用。
有人知道解决方法吗？帮助将不胜感激，谢谢！
英文:
I am making a simple random number generator game using JS and HTML. In this game, you can set the minimum and the maximum number you want for your random number to be in between.
However, when setting my variables and logging the results, impossible numbers show up. For example, if I set the minimum to 50 and the maximum to 100, answers like 58650 , 16750 , or 31450 will show up. I've noticed that the minimum number you set it to will always come at the end. I have tried changing the format and changing the code but nothing seemed to work.
Does anyone know the solution to this? Help is greatly appreciated, thank you!!
Home.html(probably not the problem):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Number Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="Title">Random Number Generator</h1>
<hr>
<div class="container">
<p> Enter 2 numbers that you want the random number to be in between</p>
<p id="result" class="hide"></p>
<div class="container2">
<input id="inputmin" class="numinput" type="text">
<p>-</p>
<input id="inputmax" class="numinput" type="text">
</div>
<button id="submitbtn" class="submitbtn">Generate</button>
</div>
<script src="/Home.js"></script>
</body>
</html>
Home.js:
const usermininput = document.getElementById("inputmin")
const usermaxinput = document.getElementById("inputmax")
const usersubmitBtn = document.getElementById("submitbtn")
const result = document.getElementById("result")
function random(min, max) {
return Math.floor(Math.random() * max) + min;
}
usersubmitBtn.addEventListener("click", () =>{
const usermin = usermininput.value
const usermax = usermaxinput.value
console.log(random(usermin,usermax))
})
答案1
得分: 1
value 属性是输入元素的字符串，因此您需要首先将其转换为数字（否则，+ 会执行字符串连接而不是加法）。可以使用一元加法运算符来完成这个操作，即 const usermin = +usermininput.value 和 const usermax = +usermaxinput.value。
或者，可以使用 <input type="number"> 并访问 valueAsNumber 属性。
以下是您提供的代码部分的翻译：
const usermininput = document.getElementById("inputmin");
const usermaxinput = document.getElementById("inputmax");
const usersubmitBtn = document.getElementById("submitbtn");
const result = document.getElementById("result");
function random(min, max) {
return Math.floor(Math.random() * max) + min;
}
usersubmitBtn.addEventListener("click", () => {
const usermin = usermininput.valueAsNumber;
const usermax = usermaxinput.valueAsNumber;
console.log(random(usermin, usermax));
});
<h1 class="Title">随机数生成器</h1>
<hr>
<div class="container">
<p>输入您想要生成随机数的两个数字</p>
<p id="result" class="hide"></p>
<div class="container2">
<input id="inputmin" class="numinput" type="number">
<p>-</p>
<input id="inputmax" class="numinput" type="number">
</div>
<button id="submitbtn" class="submitbtn">生成</button>
</div>
英文:
The value property of an input element is a string, so you need to convert it to a number first (otherwise, + performs string concatenation rather than addition). This can be done with the unary plus operator, i.e. const usermin = +usermininput.value and const usermax = +usermaxinput.value.
Alternatively, use <input type="number"> and access the valueAsNumber property.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const usermininput = document.getElementById("inputmin")
const usermaxinput = document.getElementById("inputmax")
const usersubmitBtn = document.getElementById("submitbtn")
const result = document.getElementById("result")
function random(min, max) {
return Math.floor(Math.random() * max) + min;
}
usersubmitBtn.addEventListener("click", () => {
const usermin = usermininput.valueAsNumber;
const usermax = usermaxinput.valueAsNumber;
console.log(random(usermin, usermax));
})
<!-- language: lang-html -->
<h1 class="Title">Random Number Generator</h1>
<hr>
<div class="container">
<p> Enter 2 numbers that you want the random number to be in between</p>
<p id="result" class="hide"></p>
<div class="container2">
<input id="inputmin" class="numinput" type="number">
<p>-</p>
<input id="inputmax" class="numinput" type="number">
</div>
<button id="submitbtn" class="submitbtn">Generate</button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论