使用鼠标光标更改元素位置

Question

 document.addEventListener('mousemove', moveMouse) function moveMouse(params) { const clientX = params.clientX; const clientY = params.clientY; const square = document.querySelector('.square'); square.style.left = clientX + 'px'; square.style.top = clientY + 'px'; } document.addEventListener('click', function() { const p = document.createElement("div"); p.classList.add('square'); const container = document.querySelector('.container'); container.appendChild(p); })

 .square { border: 2px solid black; width: 25px; height: 25px; display: block; background-color: blanchedalmond; border-radius: 50%; position: relative; transform: translate(-72%,-72%); opacity: 0.3; }

 <div class="container"> <div class="square"></div> </div>

With the code above i want to apply the moveMouse function on all elements which i create by clicking. Now that function is working only for the first element ( the div with the class .square ); How to apply the moveMouse function and for the next created elements by clicking?

Answer 1

Use querySelectorAll and loop through the elemtns to change their position :

 document.addEventListener('mousemove', moveMouse) function moveMouse(params) { const clientX = params.clientX; const clientY = params.clientY; const squares = document.querySelectorAll('.square'); squares.forEach(sq => { sq.style.left = clientX + 'px'; sq.style.top = clientY + 'px'; }); } document.addEventListener('click', function() { const p = document.createElement("div"); p.classList.add('square'); const container = document.querySelector('.container'); container.appendChild(p); })

 .square { border: 2px solid black; width: 25px; height: 25px; display: block; background-color: blanchedalmond; border-radius: 50%; position: relative; transform: translate(-72%,-72%); opacity: 0.3; }

 <div class="container"> <div class="square"></div> </div>