I'm trying to make a button that adds 1 to an already set value (0001, 0002, 0003, etc). This is what I have so far; any help is appreciated.
I've tried heaps of other approaches and this is as far as I have gotten and I have limited knowledge of coding hence me asking for help. I suspect the issue is with the Javascript but I don't know.
function Join() {
str++;
count();
}
var str = "1";
function count() {
document.getElementById('followers').innerHTML = (str.lpad("0", 4));
}
String.prototype.lpad = function(padString, length) {
var str = this;
while (str.length < length)
str = padString + str;
return str;
}.button {
opacity: 1;
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
border-radius: 30px;
text-align: center;
text-decoration: none;
background-color: #1D1D1D;
border: none;
color: white;
padding: 15px 42px;
font-size: 25px;
cursor: pointer;
outline: none;
}
.button2 {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
.button:active {
background-color: #080808;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
transform: translateY(4px);
}
.counter-wrap {
text-align: center;
padding: .75rem 2rem 1.25rem;
display: inline-block;
margin: 0 auto;
background: url(../images/counter-starburst-blue.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: 70px auto;
width: 100%;
}
*, ::after, ::before {
box-sizing: border-box;
}
.letter-spacing {
letter-spacing: 2px;
}
.text-uppercase {
text-transform: uppercase!important;
font-family: Montserrat,sans-serif;
color: #4d4f54;
}
.counter {
display: inline-block;
margin: 1.25rem .75rem .25rem .75rem;
font-size: 2rem;
line-height: .875;
font-weight: 900;
color: #273654;
}<head><title>Button testing</title></head><body onload="count()"><div class="counter-wrap"><div id="followers" class="counter">0000000000 </div><div class="measure-wrap"><span class="text-uppercase letter-spacing" style="top: 4px;">People</span></div></div><div><button type="button" onclick="Join()" class="button button2">Join</button></body>