image.png

※alert라는 함수를 사용하면, 브라우저에 경고창을 띄울 수 있다. ▶ alert('message');

주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다라는 경고창이 나타나도록 코드를 작성한다.

단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성한다.

실습 결과

image.png

    <style>
    body {
        text-align: center;
        padding: 30px 0;
    }

    #title {
        font-weight: 500;  
    }

    #grade {
        width: 65px;
        height: 35px;
        color: skyblue;
        font-size: 15px;
        border: solid 1px skyblue;
        border-radius: 5px;
        background-color: transparent;
        transition-duration: .5s;
        cursor: pointer;
    }

    #grade:hover {
        color: #FFFFFF;
        background-image: linear-gradient(280deg, blue, blue);
    }
</style>
</style>
</head>

<body>
    <h2 id="title">정답일까?</h2>
        <button id="grade">채점</button>
</body>
<script>
    //문제풀이
    
</script>

실습 결과

<script>
    //문제풀이
    const btn = document.getElementById('grade')
    console.log(btn);
    
    btn.onclick = function (){
        alert('정답입니다.')
    }
</script>

image.png