고정 헤더 영역
상세 컨텐츠
본문
아디비번치고 엔터쳤을때 뭔가 비었을때 이벤트발생하게
<!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>Title</title>
<style>
</style>
</head>
<body>
<form action="" id="loginform">
<div>
<label >
<input type="text" id = "userid">
</label>
</div>
<div>
<label >
<input type="password" id = "userpw">
</label>
</div>
<input type="submit" value="로그인">
</form>
</body>
<script>
const useridinput = document.querySelector("#userid");
const userpwinput = document.querySelector("#userpw");
useridinput.addEventListener("keydown",(e)=>{
if(e.keyCode===13){
if(useridinput.value==''){
alert("아이디를 입력하세요");
return;
}
if(userpwinput.value==''){
alert("비번을 입력하세요");
return;
}
//강제 이벤트 발생
const form = document.querySelector("#loginform");
form.submit();
}
});
userpwinput.addEventListener("keydown",(e)=>{
if(e.keyCode===13){
if(useridinput.value==''){
alert("아이디를 입력하세요");
return;
}
if(userpwinput.value==''){
alert("비번을 입력하세요");
return;
}
//강제 이벤트 발생
const form = document.querySelector("#loginform");
form.submit();
}
})
</script>
</html>
누르면 table의 td가 바뀌는거
<!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>Title</title>
<style>
</style>
</head>
<body>
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
</body>
<script>
// t2의 콘텐츠를 바꾸는 함수
function modifyText(new_text) {
const t2 = document.getElementById("t2");
t2.firstChild.nodeValue = new_text;
}
// 표에 이벤트 수신기 추가
const el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);
</script>
</html>
댓글 영역