Step01_example2,3 (inner Text, value 변경, Number())

 

 

input 요소에 사용자가 입력한 문자열을 javascript로 접근할때 innerText가 아닌 value로 접근할 수 있다.

 

 

다음은 예시 문제이다.

 

입력값은 value, 결과값은 innerText로 작성해준 것을 볼 수 있다.

let msg=document.querySelector("#one").value;를 함수안에다 적어야 정상 작동한다. 리로드 시점의 input 텍스트를 입력하는 것이 아니라 버튼 클릭 시점의 텍스트를 입력하는 것이기 때문이다.

 

비슷한 방식으로 삭제 버튼도 만들 수 있다.

 

 

-예제 input type 입력값으로 연산이 가능하게 작성해야 한다.

필자가 작성한 코드

응용해서 연산이 가능한 기능을 만들었다. 저번 방식과 달라진 점은 input type="number"로 변경한 점과 valueAsNumber를 활용하여 입력값을 string type에서 number type으로 변경하여 연산이 가능하게 만든 점이다.

 

 

반면에 선생님께서는 Number() 빌트인 함수를 사용해서 작성하셨다.

해당 정보를 숫자로 출력해주는 함수이다.

 

Number()를 활용하면 input type="text"로 유지해놔도 작동한다.