- getElementById : 인자에 해당하는 값을 id로 하는 요소를 하나 반환합니다.
- getElementsByClassName : 인자에 해당하는 값을 class로 하는 요소를 여러개 반환합니다.
- querySelector : css-selector 문법을 받아서 해당하는 요소를 하나 반환합니다.
onclick 으로 함수실행하기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="alertBox">알림창임!</div>
<button class="show-alert" onclick="document.getElementById('alertBox').style.display = 'block'">알림창을 보여줘!</button>
</body>
</html><button class="show-alert" onclick="모달창열어줘()">알림창을 보여줘!</button>
<script>
function 모달창열어줘() {
document.getElementById('alertBox').style.display = 'block';
}
</script>입력한값 클릭후 화면에 나타내기
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="targetInput">
<button id="submitBtn">제출</button>
<div id="result"></div>
<script>
document.getElementById("submitBtn").addEventListener('click',function(){
var 사용자가입력한값 = document.querySelector('#targetInput').value;
document.querySelector("#result").innerHTML = 사용자가입력한값;
</script>
</body>
</html>조건문을 추가하여 값이 없으면
공백을 제거후에 알럿창 생성하기!
if(!사용자가입력한값.trim()){
alert("공백이있습니다.")
}
});최종 결과
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="targetInput">
<button id="submitBtn">제출</button>
<div id="result"></div>
<script>
document.getElementById("submitBtn").addEventListener('click',function(){
var 사용자가입력한값 = document.querySelector('#targetInput').value;
document.querySelector("#result").innerHTML = 사용자가입력한값;
if(!사용자가입력한값.trim()){
alert("공백입력 ㄴㄴ")
}
});
</script>
</body>
</html>
lbh_dev