How could I take inputs from a user, do math with them, then output the answer to the math? And how would I make the output value auto-update?

I really have no idea how I would go about this, I'm new to HTML / js in general.

So far I have:

<div class="inputs">
    <label for="#arena2v2">2v2 Arena Rating:&#9;</label><input class="pvp" type="number" step="1" max="3500" min="0.0" id="arena2v2" value="0"><br />
    <label for="#arena3v3">3v3 Arena Rating:&#9;</label><input class="pvp" type="number" step="1" max="3500" min="0.0" id="arena3v3" value="0"><br />
    <label for="#rbg">RBG Rating:&#9;&#9;</label><input class="pvp" type="number" step="1" max="3500" min="0.0" id="rbg" value="0"><br />
</div>
<div style="position: relative">
    <div class="pvpThing center-align" style="position: relative;">
      Score:<br />
      <span id="score">0.000000</span>
    </div>
</span>
</div>

for the inputs.

For the math, I have

var arenascore = (arena2v2 + arena3v3) * 2
var arena = arenascore * 5
var rbgscore = rbg * 5
var score = arena + rbgscore

I don't know how I would make the auto-update thing. I tried a few things and none of them worked.

Answers 1

  • do it on keyup and change -- so every time the user types something the math is done

    here's how i would do it :

        <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
            $("input").on("keyup change",function(){
            //user is typing so will trigger this
                var value1 ="",value2 = ""
    
                value1 = $("#value1").val();
                value2 = $("#value2").val();
                if(value1 != "" && value2 != "" && value1 != "undefined" && value2 != "undefined"){
                    $("#score").html(value1 * value2);
                }
            });
        });
    </script>
    </head>
    <body>
    
    Enter Value 1: <input type="number" id="value1"><br>
    
    Enter Value 2: <input type="number" id="value2">
    
    <p id="score"></p>
    
    </body>
    </html>
    

    this is a basic example of how i would do this -- you can change the variables to get the correct data and give the result of the math


Related Articles