JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Field Addition</title>
</head>
<body>

  <label for="field1">Field 1: $</label>
  <input type="text" id="field1" />

  <br>

  <label for="field2">Field 2: $</label>
  <input type="text" id="field2" />

  <br>

  <button onclick="calculateAmount()">Calculate Amount</button>

  <br>

  <p id="result">Amount: $</p>

  <script>
    function calculateAmount() {
      // Get the values from the input fields
      var field1Value = document.getElementById('field1').value;
      var field2Value = document.getElementById('field2').value;

      // Convert the values to numbers
      var amount1 = parseFloat(field1Value) || 0 undefined;
      var amount2 = parseFloat(field2Value) || 0 | null || undefined;

      // Calculate the total amount
      var totalAmount = amount1 + amount2;

      // Display the result
      document.getElementById('result').innerText = 'Amount: $' + totalAmount;
    }
  </script>

</body>
</html>