Add class using button for each span created using JavaScript

Question

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");
});

Your HTML is invalid. You cannot have more than one element with any given id value. It must be unique. https://www.w3schools.com/html/html_id.asp — connexo, May 16 '22 at 14:36
@Asn In `myFunction2` you are only getting the single element and adding rotate class to it. You can either add the `rotate` class while creating the element or use `.querySelectorAll` to get all elements you want to add rotation to. — Dipanshu Mahla, May 16 '22 at 14:43

Sumit Sharma · Answer 1 · 2022-05-16T14:39:34.547

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>

got an email I can contact you by about this problem? – Asn May 16 '22 at 15:56 — Asn, May 16 '22 at 15:56

score 1 · Answer 2 · answered May 16 '22 at 14:46

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>

got an email I can contact you by about this problem? – Asn May 16 '22 at 15:56 — Asn, May 16 '22 at 15:56

score 0 · Answer 3 · answered May 16 '22 at 14:27

0

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');

answered May 16 '22 at 14:27

Parsa Arvaneh

139
1
9

I added transform to the span by using display:block to one of them but its not adding for all of them – Asn May 16 '22 at 14:33
Typo: `elemen =>`. Also `new class name` cannot contain spaces. – connexo May 16 '22 at 14:40

score 0 · Answer 4 · answered May 16 '22 at 14:31

0

You can get all the spans in a QuerySelector, then apply your class for each of them like this :

function myFunction2() {
  spans = document.querySelectorAll('span')
  spans.forEach(span => span.classList.add("rotate"))
}

answered May 16 '22 at 14:31

Guillaume

319
1
11

score 0 · Answer 5 · answered May 16 '22 at 14:38

You use getElementById to retrieve elements to change, but this function returns at most only one element.

The id global attribute defines an identifier (ID) which must be unique in the whole document.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

You could use a class instead:

x.classList.add("item");

Then:

const elements = document.getElementsByClassName("item");
for (let i = 0; i < elements.length; i++) {
  elements[i].classList.add("rotate");
}

Or, if you want to use forEach, transform the HTMLCollection to an Array with Array.from:

const elements = document.getElementsByClassName("item");
Array.from(elements).forEach(element => {
  element.classList.add("rotate");
});

score 0 · Answer 6 · answered May 16 '22 at 14:54

id should be uniq, that's why document.getElementById returns only one element.

In this case you should try to

x.setAttribute("class", "firstPracPara");

Now you can easily add new classes using below code

document.querySelectorAll('.className').forEach((elem) {
   elem.classList.add("rotate");
});

Add class using button for each span created using JavaScript

6 Answers6