Question 214849 in Html Question posted in
Some basic documentation can be found here.

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 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));
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    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
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search