value 속성

뉴비·2024년 10월 21일

자바 스크립트

목록 보기
12/20

값 요소 불러들이기

(input)(select)처럼 사용자로부터 입력을 받는데 사용 되는 요소들이 있다. 여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성을 써보자

  • 차이점
    요소에 쓰여져 있는 텍스트에 접근한다:textContent
    사용자가 직접 요소에 입력한 값에 접근하고 싶다:value

접근?

  • 입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지, 읽기와 쓰기다.
//대상 요소의 사용자 입력값을 읽어 콘솔에 출력하자!
console.log(target.value)
//대상 요소의 사용자 입력값을 "변경값"으로 바꾸자!
target.value = "변경값"

(Form)요소

여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽어들일 때는, 개별 입력 요소의 name 속성값을 토대로 입력값에 접근 할 수 있다.

<form>
  <input name="이름" />
    <input name="별명" />
      <input type="submit" />
        </form>

const form = document.querySelector("form")
form.addEventListener("submit", function(e){
  console.log (e.target.이름.value)
  console.log (e.target.별명.value)
})
profile
뉴비입니다

0개의 댓글