Add class using button for each span created using JavaScript-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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