1 | initial version |
To make only the most recently added element respond to an onClick event while rotating around the center, you can use JavaScript to select the last child of the DIV and add an event listener to it. Here's an example:
<div class="container"></div>
const container = document.querySelector(".container");
const newItem = document.createElement("div");
container.appendChild(newItem);
const lastItem = container.lastChild;
lastItem.addEventListener("click", onClickHandler);
function onClickHandler() {
// Rotate the clicked element around the center
// ...
}
.container div {
transform: translate(-50%, -50%) rotate(0deg);
position: absolute;
left: 50%;
top: 50%;
}
function onClickHandler() {
// Get the current rotation angle of the element
const currentRotation = parseInt(this.style.transform.split("(")[1]);
// Update the rotation angle by 45 degrees
const newRotation = currentRotation + 45;
// Apply the new transformation to the element
this.style.transform = `translate(-50%, -50%) rotate(${newRotation}deg)`;
}
This way, only the most recently added element will respond to the onClick event, and it will rotate around the center when clicked.