I have gotten an inline element to spin after it has been created using JavaScript by adding a new class to it but I am trying to add that spinning effect to all spans created using JavaScript, currently it is only doing it for 1.
function myFunction() {
var x = document.createElement("SPAN");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);
x.setAttribute("id", "firstPracPara");
x.style.display = "block";
}
function myFunction2() {
var element = document.getElementById("firstPracPara");
element.classList.add("rotate");
}span {
display: block;
}
.firstPracPara {
transform: rotate(10deg);
}
.rotate {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<p>Click the button to create a SPAN element.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>I have never used forEach before but i feel like this is the way to do it.
x.forEach(function (e) {
element.classList.add("rotate");
});
Try using like this.
function myFunction() {
var x = document.createElement("span");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);
x.style.display = "block";
}
function myFunction2() {
let newSpan = document.querySelectorAll('span');
newSpan.forEach((e) => e.classList.add("rotate"));
}span {
display: block;
}
.firstPracPara{
transform: rotate(10deg);
}
.rotate{
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}<p>Click the button to create a SPAN element.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>Use querySelectorAll wisely. You can ignore already rotated spans.
See the Snippet below:
function myFunction() {
var x = document.createElement("SPAN");
var t = document.createTextNode("This is a span element.");
x.appendChild(t);
document.body.appendChild(x);
x.setAttribute("class", "firstPracPara");
x.style.display = "block";
}
function myFunction2() {
var elements = document.querySelectorAll(".firstPracPara:not(.rotate)");
elements.forEach(_element=>{
_element.classList.add("rotate");
});
}span {
display: block;
}
#firstPracPara {
transform: rotate(10deg);
}
.rotate {
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<p>Click the button to create a SPAN element.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Spin Span</button>You can't use transform on span. See this link for more explanations.
How can I use CSS3 transform on a span?
As for your other question:
main.js
const elements= document.querySelectorAll('.className');
elements.forEach(elemen => element.classList.add('new class name');