英文:
Weird behavior when passing a random number to html in javascript
问题
I have the following HTML file where I want a number level within 50% of a given target (the "Level" field) to be input into the "Attribute" field
<!DOCTYPE html>
<html>
<body>
<input type="number" name="playerLevel" onchange="populateAttributes()" id="playerLevel">
<label for="playerLevel">Level</label>
</body>
<br>
<tr>
<td><input type="number" id="attributeScore"></td>
<label for="attribute">Attribute</label>
</tr>
<script src="script.js"></script>
</html>
And I have the following Javascript code to generate random numbers
function generateRandomLevel(targetLevel)
{
const target = targetLevel; // The target around which the random levels are generated
const range = 0.5; // 0.5 => 50% deviation from target and so on
const upperLevelLimit = Math.round(target + target * range); // Target + 50% deviation
const lowerLevelLimit = Math.round(target - target * range); // Target - 50% deviation
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit); // Generate Level within 50% of target
return x;
}
function populateAttributes()
{
let y = generateRandomLevel(document.getElementById("playerLevel").value); // Passes the value of "playerLevel" to the random number generator
document.getElementById("attributeScore").value = y; // Set the value inside "playerLevel" to the random number generated
}
However, when I update the "Level" field, I get numbers totally out of range of the target like 72 incase of entering 10 into the "Level" field.
Does anyone know why this happens?
When I run the random number generator as a standalone, it works just fine, i.e
function generateRandomLevel(playerLevel)
{
const target = playerLevel;
const range = 0.5;
const upperLevelLimit = Math.round(target + target * range);
const lowerLevelLimit = Math.round(target - target * range);
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);
return x;
}
console.log(generateRandomLevel(10));
英文:
I have the following HTML file where I want a number level within 50% of a given target (the "Level" field) to be input into the "Attribute" field
<!DOCTYPE html>
<html>
<body>
<input type = "number" name = "playerLevel" onchange = "populateAttributes()" id = "playerLevel">
<label for = "playerLevel">Level</label>
</body>
<br>
<tr>
<td><input type = "number" id = "attributeScore"></td>
<label for = "attribute">Attribute</label>
</tr>
<script src = "script.js"></script>
</html>
And I have the following Javascript code to generate random numbers
function generateRandomLevel(targetLevel)
{
const target = targetLevel; // The target around which the random levels are generated
const range = 0.5; // 0.5 => 50% deviation from target and so on
const upperLevelLimit = Math.round(target + target * range); // Target + 50% deviation
const lowerLevelLimit = Math.round(target - target * range); // Target - 50% deviation
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit); // Generate Level within 50% of target
return x;
}
function populateAttributes()
{
let y = generateRandomLevel(document.getElementById("playerLevel").value); // Passes the value of "playerLevel" to the random nunber generator
document.getElementById("attributeScore").value = y; // Set the value inside "playerLevel" to the random number generated
}
However, when I update the "Level" field, I get numbers totally out of range of the target like 72 incase of entering 10 into the "Level" field.
Does anyone know why this happens?
When I run the random number generator as a standalone, it works just fine, i.e
function generateRandomLevel(playerLevel)
{
const target = playerLevel;
const range = 0.5;
const upperLevelLimit = Math.round(target + target * range);
const lowerLevelLimit = Math.round(target - target * range);
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);
return x;
}
console.log(generateRandomLevel(10));
答案1
得分: 1
更改此处 document.getElementById("playerLevel").valueAsNumber 以使用 valueAsNumber
function generateRandomLevel(targetLevel)
{
const target = targetLevel; // 用于生成随机等级的目标值
const range = 0.5; // 0.5 => 目标值的50%偏差，等等
const upperLevelLimit = Math.round(target + target * range); // 目标值 + 50%偏差
const lowerLevelLimit = Math.round(target - target * range); // 目标值 - 50%偏差
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit); // 在目标值的50%范围内生成等级
return x;
}
function populateAttributes()
{
let y = generateRandomLevel(document.getElementById("playerLevel").valueAsNumber); // 将 "playerLevel" 的值传递给随机数字生成器
document.getElementById("attributeScore").value = y; // 将 "playerLevel" 中的值设置为生成的随机数字
}
因为 value 被视为字符串。
英文:
change this document.getElementById("playerLevel").valueAsNumber to use valueAsNumber
function generateRandomLevel(targetLevel)
{
const target = targetLevel; // The target around which the random levels are generated
const range = 0.5; // 0.5 => 50% deviation from target and so on
const upperLevelLimit = Math.round(target + target * range); // Target + 50% deviation
const lowerLevelLimit = Math.round(target - target * range); // Target - 50% deviation
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit); // Generate Level within 50% of target
return x;
}
function populateAttributes()
{
let y = generateRandomLevel(document.getElementById("playerLevel").valueAsNumber); // Passes the value of "playerLevel" to the random nunber generator
document.getElementById("attributeScore").value = y; // Set the value inside "playerLevel" to the random number generated
}
because value is treated as a string
答案2
得分: 1
这是因为<input>元素的value属性始终是一个字符串。您需要使用parseInt(targetLevel, 10);将值解析为数字。
请查看下面的示例，它执行了这个操作，并记录了类型和值。
这是一个问题，因为在JavaScript中对字符串进行数学运算实际上是有效的，您可能会得到像这样的奇怪结果。例如，5 + 5将产生10，这是您所期望的，但"5" + "5"将产生"55"，"55" * 0.5将产生52.3 - 这就是您遇到奇怪现象的原因。
Math.round("5" + "5" * 0.5) // 53
Math.round(5 + 5 * 0.5) // 8
function generateRandomLevel(targetLevel) {
console.log(typeof targetLevel, targetLevel);
const target = parseInt(targetLevel, 10); // 目标值，用于生成随机级别
console.log(typeof target, target);
const range = 0.5; // 0.5 => 目标的50%偏差等等
const upperLevelLimit = Math.round(target + target * range); // 目标 + 50%偏差
const lowerLevelLimit = Math.round(target - target * range); // 目标 - 50%偏差
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit); // 在目标的50%范围内生成级别
return x;
}
function populateAttributes() {
let y = generateRandomLevel(document.getElementById("playerLevel").value); // 将"playerLevel"的值传递给随机数生成器
document.getElementById("attributeScore").value = y; // 将"playerLevel"内的值设置为生成的随机数
}
<input type="number" name="playerLevel" onchange="populateAttributes()" id="playerLevel">
<label for="playerLevel">Level</label>
<br/><br/>
<input type="number" id="attributeScore">
<label for="attribute">Attribute</label>
英文:
This is happening because the value property from an <input> will always be a string. You need to parse the value to a number with parseInt(targetLevel, 10);
See the below that does this, but also logs out the type and value.
This is a problem because doing math on strings actually does work in JavaScript and you can get weird results like this. For example 5 + 5 will produce 10 as you'd expect, but "5" + "5" will produce "55" and "55" * 0.5 will produce 52.3 - this is where your strangeness is coming from
Math.round("5" + "5" * 0.5) //53
Math.round(5 + 5 * 0.5) //8
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function generateRandomLevel(targetLevel) {
console.log(typeof targetLevel, targetLevel);
const target = parseInt(targetLevel, 10); // The target around which the random levels are generated
console.log(typeof target, target);
const range = 0.5; // 0.5 => 50% deviation from target and so on
const upperLevelLimit = Math.round(target + target * range); // Target + 50% deviation
const lowerLevelLimit = Math.round(target - target * range); // Target - 50% deviation
let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit); // Generate Level within 50% of target
return x;
}
function populateAttributes() {
let y = generateRandomLevel(document.getElementById("playerLevel").value); // Passes the value of "playerLevel" to the random nunber generator
document.getElementById("attributeScore").value = y; // Set the value inside "playerLevel" to the random number generated
}
<!-- language: lang-html -->
<input type = "number" name = "playerLevel" onchange = "populateAttributes()" id = "playerLevel">
<label for = "playerLevel">Level</label>
<br/><br/>
<input type = "number" id = "attributeScore">
<label for = "attribute">Attribute</label>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论