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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-05-29 06:58:07 +0000
Seen: 10 times
Last updated: May 29 '23
Is it feasible to utilize a Toggle Button to switch among multiple classes exceeding 2?
What is the process for generating a dynamic subdomain/URL using vue.js?
How can I create a transition on click using CSS without the need for JavaScript?
How can the style of the loader be modified while the form submission is being processed?
I'm attempting to develop a Javascript-based comments section for my website.
What are some feasible methods to enable MIDI file playback on a web browser?