chAddress.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
회원 주소
<input type="text" name="address" id="address" value="울산시 남구 삼산동">
</p>
<p>
배송지가 같으면 다음을 체크하세요.
<input type="checkbox" name="chk" id="chk">
</p>
<p>
배송지 주소
<input type="text" name="address2" id="address2">
</p>
<script>
document.querySelector('#chk').addEventListener('click', function() {
console.log(this);
if(this.checked) {
document.querySelector('#address2').value = document.querySelector('#address').value;
} else {
document.querySelector('#address2').value = ""; // 아닐때는 값을 불러라
}
})
// ⭐ 화살표 함수는 this를 가지지 못한다.
// 앞에서 발생시킨 이벤트, this
// document.querySelector('#chk').addEventListener('click', () => {
// console.log(this); // window 뜸 💚
// if(this.checked) {
// document.querySelector('#address2').value = document.querySelector('#address').value;
// } else {
// document.querySelector('#address2').value = "";
// }
// })
</script>
</body>
</html>
change.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="num" id="num"> <!-- onchange="console.log(this.value)" -->
<option value="하나">100</option>
<option value="두울">200</option>
<option value="세엣">300</option>
<option value="네엣">400</option>
</select>
<script>
document.querySelector('#num').addEventListener('change', function(a) {
console.log(this.value);
})
</script>
</body>
</html>
change_ex1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>가격 <input type="text" name="price" id="price"></p>
<p>
수량
<select name="number" id="number">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<p>총가격 <input type="text" name="totalPrice" id="totalPrice"></p>
</p>
<script>
// ⭐ 가격 input을 price에 담기
let price = document.querySelector('#price');
let selNumber = document.querySelector('#number');
price.addEventListener('input', function() { // input 이벤트, 숫자를 넣어도 문자열, 숫자로변환
// 입력받은 값을 숫자형으로 형변환
let priceNumber = Number(this.value);
if(isNaN(priceNumber)) return; // NaN 이면 return
else { // 아니면 함수실행
sum();
}
})
// ⭐ 수량 변경시 총가격 자동 변경되는 체인지이벤트
selNumber.addEventListener('change', sum);
// ⭐ input의 값과 select의 값을 곱해서 totalPrice 인풋의 값으로 지정
function sum() {
let total = price.value * selNumber.value;
// console.log(total);
document.querySelector('#totalPrice').value = total;
}
</script>
</body>
</html>
change_ex2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>1. 연산</h1>
<p>
<input type="text" name="num1" id="num1" value="10">+
<input type="text" name="num2" id="num2" value="20">=
<input type="text" name="result1" id="result1">
<button id="sumbtn">연산</button>
</p>
<h1>2. 총합 구하기</h1>
<p>
가격 <input type="text" name="price" id="price" value="2500">
수량
<select name="num3" id="num3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
총합 : <span id="total"></span>
</p>
<h1>3. 총합구하기2 (선택된 값만)</h1>
<p>바나나(1000원)
<input type="checkbox" name="fruit" id="fruit1" value="1000">
</p>
<p>사과(500원)
<input type="checkbox" name="fruit" id="fruit2" value="500">
</p>
<p>배(1500원)
<input type="checkbox" name="fruit" id="fruit3" value="1500">
</p>
<p><button id="totalBtn">총합구하기</button></p>
<p>선택한 총가격 : <span id="totalPrice"></span></p>
<script>
const sumbtn = document.querySelector('#sumbtn');
sumbtn.addEventListener('click',function(){
let num1 = document.querySelector('#num1').value;
let num2 = document.querySelector('#num2').value;
let result1 = parseInt(num1) + parseInt(num2);
document.querySelector('#result1').value = result1;
})
//2번째 총합구하기
const select = document.querySelector('#num3');
const priceO = document.querySelector('#price');
priceO.addEventListener('keyup',function(){
if(!isNaN(parseInt(priceO.value))){
totalSum();
}
})
select.addEventListener('change',function(){
totalSum();
})
function totalSum(){
let selectNum = select.value;
let price = priceO.value;
document.querySelector('#total').innerHTML = price * selectNum;
}
//3번 총합구하기
//checkbox checked가 true인 항목의 value값을 더해서
//span태그의 innerHTML로 지정
const totalBtn = document.querySelector('#totalBtn');
totalBtn.addEventListener('click',function(){
let fruits = document.getElementsByName('fruit');
let total = 0;
fruits.forEach(fruit=>{
if(fruit.checked){
total = total + Number(fruit.value)
}
})
document.querySelector('#totalPrice').innerHTML = total;
})
</script>
</body>
</html>
