HRD_훈련/실습

[CSS] 스크립트 onclick 실습 (28일차)

리드미. 2023. 6. 23. 23:54
728x90
반응형

문제 1

  1. 버튼을 클릭하면 프롬포트 창을 나타난다.
  2. 프롬포트 창에 글자를 입력하고 로그에 해당 내용이 나타나는지 확인한다.
  3. 버튼을 클릭하면 글자의 색이 바뀌도록 코드를 작성하라.

 

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ex {
            color: red;
        }
    </style>
</head>
<body>
    <div class="ex">자바스크립트 실습 예제</div>
    <button onclick="clickEvent()">클릭</button>
</body>
</html>
<script>
    function clickEvent(){
        alert("클릭했다.");
        // const/let/var
        var obj = document.querySelector('.ex');
        console.log("로그 창 ==>", obj);
        console.log("로그 창 ==>");
        console.log(obj);
        obj.style.color = "blue"; 
    }
</script>

 

 

▶ 출력 결과

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)