<h1>数値を計算する</h1>
<div>
  <label for="num1">数値1:</label>
  <input type="number" id="num1" value="10">
</div>
<div>
  <label for="num2">数値2:</label>
  <input type="number" id="num2" value="20">
</div>
<button id="calculateButton">計算する</button>
<div id="result"></div>

<script>
  const num1Input = document.querySelector("#num1");
  const num2Input = document.querySelector("#num2");
  const calculateButton = document.querySelector("#calculateButton");
  const result = document.querySelector("#result");

  calculateButton.addEventListener("click", () => {
    const num1 = Number(num1Input.value);
    const num2 = Number(num2Input.value);
    const sum = num1 + num2;
    
    result.textContent = `${num1} + ${num2} = ${sum}`;
  });
</script>