rjwebb.github.io/adder.html at master · rjwebb/rjwebb.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>

<head>
  <title>Adder</title>

  <script>
    const state = { "input_1": null, "input_2": null }

    const asFloat = (value) => {
      const parsedValue = parseFloat(value);
      return parsedValue !== NaN ? parsedValue : null;
    }

    const updateField = (fieldName, value) => {
      state[fieldName] = value;
      applyUpdate();
    }

    const applyUpdate = () => {
      const { input_1, input_2 } = state
      document.getElementById("result").textContent = (input_1 !== null && input_2 !== null) ? input_1 + input_2 : "...";
    }
  </script>

</head>


<body onload="applyUpdate()">
  <input id="input_1" type="text" oninput="updateField('input_1', asFloat(this.value))" />
  +
  <input id="input_2" type="text" oninput="updateField('input_2', asFloat(this.value))" />
  =
  <span id="result"></span>
</body>

</html>