인프런 커뮤니티 질문&답변

LeeGunWoo

작성한 질문수

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

강사님 도와주세요!

작성

182

제가 하려고 해도 어떤 부분이 왜 안되는지 전혀 모르겠습니다. ㅠㅠ

Console에 문제가 생겼다고 하지도 않은데 왜 안되는지 모르겠습니다. ㅠㅠ

빨간 박스가 전혀 움직이지 않고
undefined만 뜹니다.ㅠㅠ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse의 움직임</title>
    <style>
        body{
            background-color: rgb(255, 182, 93);
            position: relative;
        }
        h1{
            color: #000;
        }
        .cursor_item {
            position: absolute;
            width : 100px;
            height : 100px;
            background-color: red;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.onload = function(){
            let h1 = document.getElementsByTagName("h1")[0]; //Tag이름으로 선택  
            let cursor_item = document.getElementsByClassName("cursor_item")[0];//클래스 이름으로 선택 

            window.addEventListener("mousemove", mouseFunc,false);

            function mouseFunc(e){
                h1.innerHTML = "x: " + e.clinetX + "y: " + e.clinetY;
                //console.log(e.clinetX, e.clinetY); 
                cursor_item.style.transform = "translate(" +e.clinetX + "px," + e.clinetY +  "px)";
            }
        }
    </script>
</head>
<body>
    <h1>test</h1>
    <div class="cursor_item"></div>
</body>

</html>
 
 
 