我如何从用户那里获取输入，用它们做数学运算，然后输出数学运算的答案？我将如何使输出值自动更新？

Question

我真的不知道我会怎么做，我是 HTML / js 的新手。

到目前为止我有：

<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>

用于输入。

对于数学，我有

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

我不知道如何进行自动更新。我尝试了一些东西，其中 none 成功了。

Answer 1

在 keyup 和 change 上执行它——所以每次用户键入内容时，数学就完成了

这是我的做法：

    <!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>

这是我如何执行此操作的基本示例 - 您可以更改变量以获得正确的数据并给出数学结果

我如何从用户那里获取输入，用它们做数学运算，然后输出数学运算的答案？我将如何使输出值自动更新？

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?

html

javascript

jquery