Javascript 함수 Part3 (input관련, 내장함수 학습 45일차 TIL)

210817 어제에 이어 Javascript 함수에 대해 더욱 깊이 학습하는 시간을 가졌다.
form관련한 문제 때문에 처음으로 막혔던 시간...

Javascript Basic

• 계산이 안되는데 console창에 오류가 없을 경우, 변수가 비어 있는 경우가 많다.
• 함수를 실행할 버튼이 2가지일 경우 1개의 버튼만 클릭 할 경우도 생각해야 된다.
• 버튼을 클릭할 때마다 input의 value값으로 계산을 해야 될 경우에 계속 value값을 다시 불러와야 함을 유의하자.

    // 전역변수로 선언해 준 뒤.
    let item1 = 0;
    let item2 = 0;
    let item3 = 0;

    // 클릭 할 때마다 새로 불러오는 함수로 만들어 준다.
    function reading() {
      item1 = Number(document.getElementById('product1').value);
      // input의 입력되는 값이 String이므로 Number로 변환해 줘야 한다.
      item2 = Number(document.getElementById('product2').value);
      item3 = Number(document.getElementById('product3').value);
    }

• form형식의 경우 반드시 return을 해줘야 오류가 나지 않음.

    btnSum.onclick = function () {
      reading(); // 클릭 할 때마다 input의 value값 불러오는 함수 실행.
      document.getElementById('total').value = totalPrice(item1, item2, item3);
      return false;
    }