I have a span tag and a button tag
<span class="myspan">1</span>
<button id="add">Add +1</button>
var arr=["myspan1","myspan2","myspan3","myspan4"}
In order to add more span tags with new classes from the array and increase the values by clicking the button, I aim for an output like this:
<span class="myspan1">1</span>
<span class="myspan2">2</span>
<span class="myspan3">3</span>
<span class="myspan4">4</span>
Although I've attempted to achieve this using ` this JsFiddle
, I have not been successful in adding class names to the new appended tags from the array.
For those struggling with similar challenges, here is another helpful link demonstrating how to append tags with new classes from an array: http://jsbin.com/nojipowo/2/edit?html,css,js,output ... Despite various attempts, I am yet to achieve my desired output...enter code here
The following snippet showcases how the value increases upon each click:
<script> var i = 0; function buttonClick() {i++; document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>Seeking assistance for another attempt to achieve my desired output...
var i=6;
var backgrounds = ["myspan1", "myspan2", "myspan4"];
var elements = document.getElementsByClassName("myspan");var len = backgrounds.length;
$("#add").click( function() {
(i < elements.length){
$(".new-field").append('<span class="myspan">1</span><script');
var value = parseInt($(".myspan").text(), 10) + 1;
elements[i].className += ' ' + backgrounds[i%len];
i++;
$(".background").text(i);
}
});*/<span class="myspan">1</span>
<button id="add">Add +1</button>
<div class="new-field">
</div>