1. 홀태그의 value 접근법
- input 태그 내 사용자가 입력한 값을 가져오고자 함.
1.1. content영역 과 홀태그(value) 값의 접근 차이
-
Element(변수).innerHTML : 열리고 닫히는 태그의, content 영역의 텍스트(태그)를 가져오는 방법
-
Element(변수).value : input 태그에서 value 값을 가져올때 사용하는 방법
1.2. input의 value에 접근해보기
<body>
<input type="text">
<button id="btn">클릭</button>
<script>
// Element(변수).innerHTML : 열리고 닫히는 태그의, content 영역의 텍스트(태그)를 가져오는 방법
// Element(변수).value : input 태그에서 value 값을 가져올때 사용하는 방법
// id의 ="값"을 써줌
let btn = document.getElementById('btn');
// input의 선택자를 써줌 (예시 : id:#, class:.)
let input = document.querySelector('input');
btn.onclick = () => {
console.log("실행!", input.value);
alert(input.value);
// input 태그의 내용 비우기
input.value = '';
}
</script>
</body>
1.3. 실습1
<body>
<input type="text" id="inputTag">
<button id="inputBtn">input태그 값 가져오기</button>
<br>
<img src="data:image/jpeg;base64,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" alt=""
width="200px">
<br>
<button id="getImg">이미지 값 불러오기</button>
<button id="setImg">이미지 변경하기</button>
<script>
// 1. input 태그 내에 사용자가 입력한 값을 가져오자!
// 2. 가져온 값을 콘솔창에 출력하기
let input = document.getElementById('inputTag');
console.log(input);
document.getElementById('inputBtn').addEventListener('click', ()=>{
console.log(input.value);
input.value = "";
})
// 3. 이미지 태그에 접근하고 수정해보자!
document.getElementById('getImg').addEventListener('click', () => {
//console.log("이미지 가져오기 버튼 실행!");
// 3-1) 현재 img태그에서 속성 값을 출력
let img = document.querySelector('img');
console.log(img);
// Case 1. getAttribute('속성이름')
console.log(img.getAttribute('src'));
// Case 2. 속성이름
console.log(img.width);
})
// 4. 현재 이미지 다른 이미지로 변경
document.getElementById('setImg').addEventListener('click', function(){
console.log('이미지변경 버튼 ');
let img = document.querySelector('img');
// Case1 : setAttribute('속성이름', '바꿀 값')
img.setAttribute('src', 'data:image/jpeg;base64,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')
// Case2 : .속성이름 = '바꿀값'
img.width = '300';
})
</script>
</body>1.4. 실습2
<body>
<input type="text">
<button>변경!</button>
<br>
<br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgw45QTKzgHw8u-25l_DvCmfFGazuojBlSZg&usqp=CAU"
alt="" width="500px">
<script>
// 1. 사진을 두개 구한다.
// 계곡 사진
let img_src1 = "https://www.kagoshima-kankou.com/storage/tourism_themes/15/responsive_images/29jfAXG0X89lvGo6zqwqTw3CxbD7vIqierH44aFE__1673_1115.jpg"
// 제주도 사진
let img_src2 = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgw45QTKzgHw8u-25l_DvCmfFGazuojBlSZg&usqp=CAU"
// 2. 사용자가 input태그 안에 입력 값을 감지 -> console창에 띄우기
let input = document.getElementsByTagName('input')[0];
let img = document.querySelector('img');
// 3. 변경! 이라는 버튼을 눌렀을때 입력한 값에 맞게
// 사진을 배치해주세요 !
document.querySelector('button').addEventListener('click', function() {
console.log("버튼 클릭확인 : ",input.value);
// 4. ex) '양파쿵야' -> 양파쿵야 사진, '주먹밥쿵야' -> 주먹밥 쿵야 사진으로 변경
if(input.value == '계곡'){
console.log("계곡 사진으로 변경 : ",input.value);
img.src = img_src1
} else if(input.value == '제주도'){
console.log("제주도 사진으로 변경 : ",input.value);
img.setAttribute('src', img_src2)
} else {
console.log("잘못된 입력 값 : ",input.value);
// 5. 이외 다른 텍스트 입력시, alert 잘못 입력하셨습니다! 라고 띄워주기!
alert(input.value + " 값은 잘못 입력하셨습니다 !")
}
})
</script>
</body>
제가 한 번 해보겠습니다.