CODEWITHSUNDEEP
javascripthtmlcss
Asn
Asn

Reputation: 93

Add class using button for each span created using JavaScript

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

Upvotes: 0

Views: 120

Answers (6)

Blerton Rexha
Blerton Rexha

Reputation: 11

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

Upvotes: 0

Nimitt Shah
Nimitt Shah

Reputation: 4587

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>

Upvotes: 1

Sumit Sharma
Sumit Sharma

Reputation: 1237

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>

Upvotes: 2

J&#233;r&#233;mie L
J&#233;r&#233;mie L

Reputation: 775

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

Upvotes: 0

Guillaume
Guillaume

Reputation: 439

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

Upvotes: 0

Parsa Arvaneh
Parsa Arvaneh

Reputation: 147

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

Upvotes: 0

Related Questions