인프런 커뮤니티 질문&답변
작성한 질문수
마우스를 따라오지 않아요 ㅠㅠ
작성
·
143
0
<!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>
body{
background: #000;
}
h1{
color: #fff;
}
.box{position: absolute; background: red; top: 100px; left: 0; width: 100px; height: 100px;}
</style>
</head>
<body>
<script>
window.onload = () => {
let h1 = document.getElementById("h1")
let boxx = document.getElementsByClassName("box")
window.addEventListener('mousemove', mouseFunc, false)
function mouseFunc(e) {
h1.innerHTML=`X : ${e.clientX}, Y : ${e.clientY}`
boxx.style.transform =`translate(${e.clientX}px, ${e.clientY}px)`
}
}
</script>
<h1 id="h1">test</h1>
<div class="box"></div>
</body>
</html>
답변 1
0
코딩일레븐
지식공유자
안녕하세요
맨뒤에 [0]을 붙여주셔야합니다.
.box라는 클래스네임을 가진 녀석들 중 첫번째 라는 의미입니다.
let boxx = document.getElementsByClassName("box")[0];
강의에는 안 나오지만 아래의 두가지 방법으로 해도 됩니다.
let boxx = document.querySelectorAll(".box")[0];
let boxx = document.querySelector(".box");