기록
자바스트립트 querySelector를 활용한 데이터 참조 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const dataFormMaker = function(){
const inputYear = document.querySelector('#target-year-input').value;
const inputMonth = document.querySelector('#target-month-input').value;
const inputDate = document.querySelector('#target-date-input').value;
console.log(inputYear,inputMonth,inputDate)
/* console.log(document.querySelector('#target-year-input').value)
console.log(document.querySelector('#target-month-input').value)
console.log(document.querySelector('#target-date-input').value) */
}
</script>
</head>
<body>
<input id="target-year-input" class="tartget-input" />
<input id="target-month-input"class="tartget-input" />
<input id="target-date-input" class="tartget-input" />
<button onclick="dataFormMaker()">버튼</button>
</body>
</html>
document
--> 내가 잇는곳의 태그 전체를 가져옴
querySelector
-> 태그 자체를 가져옴
콘솔로 찍어보자
console.log(document.querySelector('input')) -> input 태그 전체를 가져옴
console.log(document.querySelector('#target-year-input')) -> 아이디가 target-year-input인 태그를 가져옴
console.log(document.querySelector('#target-year-input').value) -> 아이디가 target-year-input인
아이디태그의 값을 가져옴 ( 내가 input태그에 입력한 값을 가져온다)
'JAVASCRIPT&JQUERY' 카테고리의 다른 글
| 자바스크립트 구구단 찍기(파이썬3) (0) | 2023.01.10 |
|---|---|
| 자바스크립트 double버튼 만들기(파이썬2) (0) | 2023.01.10 |
| 자바스트립트 토글버튼 만들기 (파이썬) (0) | 2023.01.10 |
| 자바스트립트,제이쿼리 특정요소에 css요소 추가/삭제 이벤트주기 (0) | 2023.01.10 |
| 자바스크립트 : 객체, 배열 (0) | 2022.12.27 |
'JAVASCRIPT&JQUERY' Related Articles
more
Comments