인프런 커뮤니티 질문&답변
작성한 질문수
function mousefunc 관련 질문이요!
작성
·
140
0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<style>
body{
background-color:black;
}
h1{
color:#fff;
}
.cusor_Item{
position:absolute;
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
window.onload=function(){
let h1 = document.getElementsByTagName("h1")[0];
let cusor_item=document.getElementsByClassName("cusor_item")[0];
window.addEventListener("mousemove",mousefunc,false);
function mousefunc(e){
h1.innerHTML="x: "+e.clientX+"y: "+e.clientY;
cusor_item.style.transform = "translate("+e.clientX+"px,"+e.clientY+"px")";
//console.log(e.clientX, e.clientY);
}
}
</script>
</head>
<body>
<h1>test</h1>
<div class="cusor_Item"></div>
</body>
</html>
선생님 말씀해주신대로 써보니까 자꾸 window.onload function {} 이 부분이랑 function mousefunc(e){} 이 부분 태그가 혼동되는 일이 생깁니다 ㅠㅠ 왜그럴까요..? 그리고 저 빨간 부분이 왜 안움직이는 걸까요??
답변 1
0
안녕하세요 오타가 있네요.
let cusor_item=document.getElementsByClassName("cusor_Item")[0]; //대소문자
cusor_item.style.transform = "translate("+e.clientX+"px,"+e.clientY+"px)"; //"px")"
두가지 바꾸시면 잘 되실거에요~