FrontEnd/HTML, CSS
<button>에 함수를 적용하는 두 가지 방법
NandaNanda
2024. 2. 7. 08:23
자바스크립트에는 동일한 작업을 수행하는 여러 가지 방법이 있다.
여기서는 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>