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. w3schools.com/html/html_id.asp — connexo
– connexo, Commented May 16, 2022 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
– Dipanshu Mahla, Commented May 16, 2022 at 14:43

Sumit Sharma · Accepted Answer · 2022-05-16 14:39:34Z

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>

Nimitt Shah · Accepted Answer · 2022-05-16 14:46:24Z

1

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>

answered May 16, 2022 at 14:46

Nimitt Shah

4,6072 gold badges12 silver badges25 bronze badges

2 Comments

Asn Over a year ago

got an email I can contact you by about this problem?

Nimitt Shah Over a year ago

sure. happy to help!

Parsa Arvaneh · Accepted Answer · 2022-05-16 14:27:39Z

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, 2022 at 14:27

Parsa Arvaneh

1471 silver badge9 bronze badges

2 Comments

Asn Over a year ago

I added transform to the span by using display:block to one of them but its not adding for all of them

connexo Over a year ago

Typo: elemen =>. Also new class name cannot contain spaces.

Guillaume · Accepted Answer · 2022-05-16 14:31:38Z

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, 2022 at 14:31

Guillaume

4392 silver badges15 bronze badges

Comments

Jérémie L · Accepted Answer · 2022-05-16 14:38:38Z

0

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

answered May 16, 2022 at 14:38

Jérémie L

7934 silver badges14 bronze badges

Comments

Blerton Rexha · Accepted Answer · 2022-05-16 14:54:36Z

0

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

answered May 16, 2022 at 14:54

Blerton Rexha

113 bronze badges

Collectives™ on Stack Overflow

Add class using button for each span created using JavaScript

6 Answers 6

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related