자바스크립트에는 동일한 작업을 수행하는 여러 가지 방법이 있다.
여기서는 html의 button태그에 함수를 적용시키는 각기 다른 방법에 대해 살펴보고자 한다.
1. html 문법내에 JS코드를 넣어서 함수를 적용하는 방법
<body>
<p class="name">shinyks</p>
<button onclick="changeColor()">Change to Blue</button>
<script>
const $name=document.querySelector(".name");
function changeColor(){
$name.style.color="blue";
}
</script>
</body>
2.순수 html을 사용하여 html안에는 js코드에 사용되지 않게 하는 방법
<body>
<p class="name">shinyks</p>
<button>Change to Blue</button>
<script>
const $name=document.querySelector(".name");
const $button=document.querySelector("button");
$button.addEventListener("click",function(){
$name.style.color="blue";
});
</script>
</body>
'FrontEnd > HTML, CSS' 카테고리의 다른 글
| input 태그 속성정리 (0) | 2024.03.28 |
|---|---|
| html 태그의 속성의 중요성에 대하여(html의 input태그의 type="email"에 대하여) (0) | 2024.03.25 |
| html form태그 속성과 그 속성에 근거하여 연결된 input, button태그와의 연관성에 대하여 (0) | 2024.03.25 |
| HTML, CSS 잡다하지만 꼭 알아야 할 것 여기다 정리 (3) | 2024.03.18 |
| URL과 URLSearchParams (0) | 2024.03.14 |
