将随机数传递给JavaScript中的HTML时出现奇怪行为。

huangapple
go评论102阅读模式
英文:

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <body>
  4.         <input type="number" name="playerLevel" onchange="populateAttributes()" id="playerLevel">
  5.         <label for="playerLevel">Level</label>
  6.     </body>
  8.     <br>
  10.     <tr>
  11.         <td><input type="number" id="attributeScore"></td>
  12.         <label for="attribute">Attribute</label>
  13.     </tr>
  15.     <script src="script.js"></script>
  16. </html>

And I have the following Javascript code to generate random numbers

  1. function generateRandomLevel(targetLevel)
  2. {
  3.     const target = targetLevel; // The target around which the random levels are generated
  4.     const range = 0.5;  // 0.5 => 50% deviation from target and so on
  5.     const upperLevelLimit = Math.round(target + target * range);    // Target + 50% deviation
  6.     const lowerLevelLimit = Math.round(target - target * range);    // Target - 50% deviation
  7.     let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);    // Generate Level within 50% of target
  8.     return x;
  9. }
  11. function populateAttributes()
  12. {
  13.     let y = generateRandomLevel(document.getElementById("playerLevel").value);  // Passes the value of "playerLevel" to the random number generator
  14.     document.getElementById("attributeScore").value = y;    // Set the value inside "playerLevel" to the random number generated
  15. }

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

  1. function generateRandomLevel(playerLevel)
  2. {
  3.     const target = playerLevel;
  4.     const range = 0.5;
  5.     const upperLevelLimit = Math.round(target + target * range);
  6.     const lowerLevelLimit = Math.round(target - target * range);
  7.     let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);
  8.     return x;
  9. }
  11. 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

  1. &lt;!DOCTYPE html&gt;
  3. &lt;html&gt;
  4.     &lt;body&gt;
  5.         &lt;input type = &quot;number&quot; name = &quot;playerLevel&quot; onchange = &quot;populateAttributes()&quot; id = &quot;playerLevel&quot;&gt;
  6.         &lt;label for = &quot;playerLevel&quot;&gt;Level&lt;/label&gt;
  7.     &lt;/body&gt;
  9.     &lt;br&gt;
  11.     &lt;tr&gt;
  12.         &lt;td&gt;&lt;input type = &quot;number&quot; id = &quot;attributeScore&quot;&gt;&lt;/td&gt;
  13.         &lt;label for = &quot;attribute&quot;&gt;Attribute&lt;/label&gt;
  14.     &lt;/tr&gt;
  16.     &lt;script src = &quot;script.js&quot;&gt;&lt;/script&gt;
  17. &lt;/html&gt;

And I have the following Javascript code to generate random numbers

  1. function generateRandomLevel(targetLevel)
  2. {
  3.     const target = targetLevel; // The target around which the random levels are generated
  4.     const range = 0.5;  // 0.5 =&gt; 50% deviation from target and so on
  5.     const upperLevelLimit = Math.round(target + target * range);    // Target + 50% deviation
  6.     const lowerLevelLimit = Math.round(target - target * range);    // Target - 50% deviation
  7.     let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);    // Generate Level within 50% of target
  8.     return x;
  9. }
  11. function populateAttributes()
  12. {
  13.     let y = generateRandomLevel(document.getElementById(&quot;playerLevel&quot;).value);  // Passes the value of &quot;playerLevel&quot; to the random nunber generator
  14.     document.getElementById(&quot;attributeScore&quot;).value = y;    // Set the value inside &quot;playerLevel&quot; to the random number generated
  15. }

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

  1. function generateRandomLevel(playerLevel)
  2. {
  3.     const target = playerLevel;
  4.     const range = 0.5;
  5.     const upperLevelLimit = Math.round(target + target * range);
  6.     const lowerLevelLimit = Math.round(target - target * range);
  7.     let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);
  8.     return x;
  9. }
  11. console.log(generateRandomLevel(10));

答案1

得分: 1

更改此处 document.getElementById("playerLevel").valueAsNumber 以使用 valueAsNumber

  1. function generateRandomLevel(targetLevel)
  2. {
  3.     const target = targetLevel; // 用于生成随机等级的目标值
  4.     const range = 0.5;  // 0.5 => 目标值的50%偏差，等等
  5.     const upperLevelLimit = Math.round(target + target * range);    // 目标值 + 50%偏差
  6.     const lowerLevelLimit = Math.round(target - target * range);    // 目标值 - 50%偏差
  7.     let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);    // 在目标值的50%范围内生成等级
  8.     return x;
  9. }
  11. function populateAttributes()
  12. {
  13.     let y = generateRandomLevel(document.getElementById("playerLevel").valueAsNumber);  // 将 "playerLevel" 的值传递给随机数字生成器
  14.     document.getElementById("attributeScore").value = y;    // 将 "playerLevel" 中的值设置为生成的随机数字
  15. }

因为 value 被视为字符串。

英文:

change this document.getElementById(&quot;playerLevel&quot;).valueAsNumber to use valueAsNumber

  1. function generateRandomLevel(targetLevel)
  2. {
  3.     const target = targetLevel; // The target around which the random levels are generated
  4.     const range = 0.5;  // 0.5 =&gt; 50% deviation from target and so on
  5.     const upperLevelLimit = Math.round(target + target * range);    // Target + 50% deviation
  6.     const lowerLevelLimit = Math.round(target - target * range);    // Target - 50% deviation
  7.     let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);    // Generate Level within 50% of target
  8.     return x;
  9. }
  11. function populateAttributes()
  12. {
  13.     let y = generateRandomLevel(document.getElementById(&quot;playerLevel&quot;).valueAsNumber);  // Passes the value of &quot;playerLevel&quot; to the random nunber generator
  14.     document.getElementById(&quot;attributeScore&quot;).value = y;    // Set the value inside &quot;playerLevel&quot; to the random number generated
  15. }

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 - 这就是您遇到奇怪现象的原因。

  1. Math.round("5" + "5" * 0.5) // 53
  2. Math.round(5 + 5 * 0.5) // 8
  1. function generateRandomLevel(targetLevel) {
  2.   console.log(typeof targetLevel, targetLevel);
  3.   const target = parseInt(targetLevel, 10); // 目标值，用于生成随机级别
  4.   console.log(typeof target, target);
  5.   const range = 0.5;  // 0.5 => 目标的50%偏差等等
  6.   const upperLevelLimit = Math.round(target + target * range);    // 目标 + 50%偏差
  7.   const lowerLevelLimit = Math.round(target - target * range);    // 目标 - 50%偏差
  8.   let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);    // 在目标的50%范围内生成级别
  9.   return x;
  10. }
  12. function populateAttributes() {
  13.   let y = generateRandomLevel(document.getElementById("playerLevel").value);  // 将"playerLevel"的值传递给随机数生成器
  14.   document.getElementById("attributeScore").value = y;    // 将"playerLevel"内的值设置为生成的随机数
  15. }
  1. <input type="number" name="playerLevel" onchange="populateAttributes()" id="playerLevel">
  2. <label for="playerLevel">Level</label>
  4. <br/><br/>
  6. <input type="number" id="attributeScore">
  7. <label for="attribute">Attribute</label>
英文:

This is happening because the value property from an &lt;input&gt; 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 &quot;5&quot; + &quot;5&quot; will produce &quot;55&quot; and &quot;55&quot; * 0.5 will produce 52.3 - this is where your strangeness is coming from

  1. Math.round(&quot;5&quot; + &quot;5&quot; * 0.5) //53
  2. Math.round(5 + 5 * 0.5) //8

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function generateRandomLevel(targetLevel) {
  2.   console.log(typeof targetLevel, targetLevel);
  3.   const target = parseInt(targetLevel, 10); // The target around which the random levels are generated
  4.   console.log(typeof target, target);
  5.   const range = 0.5;  // 0.5 =&gt; 50% deviation from target and so on
  6.   const upperLevelLimit = Math.round(target + target * range);    // Target + 50% deviation
  7.   const lowerLevelLimit = Math.round(target - target * range);    // Target - 50% deviation
  8.   let x = parseInt(Math.random() * (upperLevelLimit - lowerLevelLimit) + lowerLevelLimit);    // Generate Level within 50% of target
  9.   return x;
  10. }
  12. function populateAttributes() {
  13.   let y = generateRandomLevel(document.getElementById(&quot;playerLevel&quot;).value);  // Passes the value of &quot;playerLevel&quot; to the random nunber generator
  14.   document.getElementById(&quot;attributeScore&quot;).value = y;    // Set the value inside &quot;playerLevel&quot; to the random number generated
  15. }

<!-- language: lang-html -->

  1. &lt;input type = &quot;number&quot; name = &quot;playerLevel&quot; onchange = &quot;populateAttributes()&quot; id = &quot;playerLevel&quot;&gt;
  2. &lt;label for = &quot;playerLevel&quot;&gt;Level&lt;/label&gt;
  4. &lt;br/&gt;&lt;br/&gt;
  6. &lt;input type = &quot;number&quot; id = &quot;attributeScore&quot;&gt;
  7. &lt;label for = &quot;attribute&quot;&gt;Attribute&lt;/label&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月24日 19:30:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76754038.html
  • html
  • javascript
  • random
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定