[JavaScript] Day 19 - 입력된 값을 읽어보자

입력 요소 값 읽기

<input>,<select> 처럼 사용자로부터 입력을 받는데에 사용 되는 요소들이 있다.

여기에서 사용자가 입력한 값을 읽어들일 때에는 요소의 value 속성에 접근하자.

차이점

• 요소의 텍스트에 접근하고 싶을때 : textContent 또는 innerText
• 사용자가 요소에 입력한 값에 접근하고 싶을때 : value

입력 요소의 value 값에 접근하여 할 수 있는 일!

console.log(target.value)

// 대상 요소의 사용자 입력값을 읽어 콘솔에 출력하기

// 읽기

 

target.value = "변경값"

// 대상 요소의 사용자 입력값을 "변경값"으로 바꾸기

// 쓰기

 

오늘의 실습

const form = document.querySelector("form")

form.addEventListener("submit", function(e){
    e.preventDefault()  // 새로고침 되는 기능을 차단시킨다.
    console.log(form.name.value)
    console.log(form.age.value)
})

실습의 결과