이전에는 onclick 형식으로 body 태그 안 태그 속에 직접적으로 입력하였다. 이렇게 진행하게 되면 태그 자체가 길어지게 되어 현재에는 script에 작성하여 스크립트를 넣어준다.
.addEventListener 을 사용하기 이전에는 .onclick=function(){ 적용시킬 스타일, 속성 }
인터프린트 방식이기 때문에
not a number
대입 연산자
<body>
<div id="container">
<button type="button" class="btn">-</button>
<span class="txt">0</span>
<button type="button" class="btn">+</button>
</div>
</body>
구조
<style>
button{
border: 0;
padding: 15px 30px;
background: #ccc;
font-size: 20px;
}
#container{
width: 600px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
}
.txt{
display: block;
width: 100px;
height: 50px;
background: #f7f7f7;
text-align: center;
line-height: 50px;
}
</style>
속성
<script>
window.addEventListener("DOMContentLoaded", function(){
const txt=document.querySelector(".txt");
const btn=document.querySelectorAll(".btn");
let num=0;
btn[0].addEventListener("click", function(){
num-=1;
txt.textContent=num
})
btn[1].addEventListener("click", function(){
num+=1;
txt.textContent=num
})
})
</script>
<script>
window.addEventListener("DOMContentLoaded", function(){
const color=document.querySelectorAll(".color");
let changeColor;
color[0].addEventListener("click",function(){
changeColor=color[0].textContent;
console.log(changeColor)
})
});
</script>
</head>
<body>
<div id="container">
<span class="color">#ff0000</span>
<span class="color">#00ff00</span>
<span class="color">#0000ff</span>
</div>
</body>
'기록 > 수업정리_javascr' 카테고리의 다른 글
| scrollTo() (0) | 2024.07.31 |
|---|---|
| FixedNavigation, 상대좌표값, 절대좌표값 (0) | 2024.07.29 |
| javascript_4_함수 (0) | 2024.07.18 |
| Javascript_2 (0) | 2024.07.16 |
| javascript_1 (2) | 2024.07.15 |
