카테고리 없음

HTML5 - 두개의 값을 받아 jquery로 사칙 연산

artra 2023. 7. 4. 13:23
반응형
jQuery 사칙연산



<!-- JQUERY -->
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 사칙연산</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <input type="number" id="num1" placeholder="첫 번째 숫자를 입력하세요">
    <input type="number" id="num2" placeholder="두 번째 숫자를 입력하세요">
    <select id="operation">
      <option value="add">더하기</option>
      <option value="subtract">빼기</option>
      <option value="multiply">곱하기</option>
      <option value="divide">나누기</option>
    </select>
    <button id="calculate-button">계산</button>
    <p id="result"></p>
  </div>
  <script>
    $('#calculate-button').click(function() {
      var num1 = parseInt($('#num1').val());
      var num2 = parseInt($('#num2').val());
      var operation = $('#operation').val();
      var answer;
 
      switch (operation) {
        case 'add':
          answer = num1 + num2;
          break;
        case 'subtract':
          answer = num1 - num2;
          break;
        case 'multiply':
          answer = num1 * num2;
          break;
        case 'divide':
          answer = num1 / num2;
          break;
      }
 
      $('#result').html(answer);
    });
  </script>
</body>
</html>
 
cs
반응형
저작자표시 비영리 변경금지 (새창열림)