Consider I have this simple div
:
<div class="diamond"><span class="material-symbols-outlined" id="locks">lock</span></div>
The CSS for this is below:
.rotate-and-change {
transform: rotate(360deg);
}
.diamond {
aspect-ratio: 1 / 1;
margin: 0px -2px;
background-color: #f44336;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
scale: 0.8;
}
#locks{
padding: 8px;
transition: transform 0.5s ease;
}
And the function that I am having trouble with is:
let diamonds=document.getElementsByClassName('diamond');
let locks=document.querySelectorAll('#locks');
function changeTheMarksInDiamonds(parameter){
setTimeout(() => {
for(let i=0;i<=correctGuess-parameter;i++){
diamonds[i].style.background=parameter==0?"#f44336":"#4caf50";
//diamonds[i].innerHTML=parameter==1?"<span id="locks" class="material-symbols-outlined" >check</span>":"<span id="locks"class="material-symbols-outlined" >lock</span>";
//diamonds[i].innerHTML=parameter==1?"<span id="locks" class="material-symbols-outlined" >check</span>":"<span id="locks"class="material-symbols-outlined" >lock</span>";
/*
const newLockElement = diamonds[i].querySelector("#locks");
newLockElement.classList.add("rotate-and-change");
*/
}
}, 500);
if(parameter==1){
document.getElementsByClassName('conditionsStatistics')[0].style.paddingLeft=200-correctGuess*50+"px";
}
}
So, whenever I call this changeTheMarksInDiamonds(parameter)
function with any parameter, it is supposed to add the class rotate-and-change
to the span of id locks
after 0.5 seconds. But nothing such happens. The content in the span changes surely though, but the id locks
get attached as a class named locks
, that I do not want to. Moreover, the rotation-transformation effect also does not work. I though there is a simple logic being missed in my JavaScript code, but how to solve it?
Any kind of assistance is appreciated.
3
Answers
I don’t understand why you are doing it so difficult.
When you change the innerHtml fo a parent element(here, like ‘.diamond’), it recreates the content inside the div. So any references to the original elements like #locks span will be lost, and the #locks id might be incorrectly applied as a class.
So to do this, instead of replacing the entire innerhtml of the ‘.diamond’ div, you could directly modify the ‘span’ inside it.
I gave you the corrrected code.
CSS:
JavaScript:
I’m guessing
changeTheMarksInDiamonds(parameter)
function seems to stem from the way you’re updating theinnerHTML
of the diamond elements. When you setinnerHTML
, it replaces the entire content of the element, causing the existing DOM nodes (including the span with theid="locks"
) to be removed and recreated. This means the reference to the original#locks
element is lost, and any event listeners or styles applied to the original element are not transferred to the new one.I tried to implement it and it seems to be working:
Changed id="locks" to class="locks" to avoid duplicate IDs.
Replacing all the HTML in the diamond element directly changed the content and classes of the existing span.
Only then was a rotating triangle used to ensure variability.