[JavaScript] 화면 버튼 클릭 시 자동 새로고침 되는 문제

홍예림·2023년 9월 1일

내가 만난 에러

목록 보기

4/11

총합 구하기 버튼을 클릭할 때마다 자동으로 새로고침이 되며 input 칸 안의 데이터가 초기화되버리는 문제가 있었다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Document</title>
    <script lang="javascript">
      function sum() {
        let num = Number(table.numInput.value) + 1;
        let result = 0;

        console.log(num)
        
        for(let i = 0 ; i < num ; i++){
          result = result + i;
          console.log(result);
        }

        table.numSum.value = `${result}`;
      };
    </script>
  </head>
  <body>
  	<form name="table">
      <table border="2">
        <tbody>
          <tr>
            <td align="center">목표 숫자</td>
            <td><input name="numInput" width="300" /></td>
          </tr>
          <tr>
            <td align="center">총합</td>
            <td><input name="numSum" width="100" /></td>
          </tr>
        </tbody>
    </table> 
    <br />
    <button onclick="sum()">총합 구하기</button>
  </body>
</html>