CODEWITHSUNDEEP
javascripthtml
Dante
Dante

Reputation: 5

Why doesn't this Javascript counter work?

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>

Upvotes: 0

Views: 73

Answers (1)

mplungjan
mplungjan

Reputation: 177950

As mentioned, the str is not a string after you increment. A good reason to not use prototype. Here is a cleaner version not using inline events line onload

Note I gave the button an ID and changed the names of the function to what they were actually doing.

I would actually add code to change People to Person when count is === 1

var num = 1;
window.addEventListener("load", function() { // on page loade
  document.getElementById("join").addEventListener("click", function(event) {
    num++;
    show()
  })
  show(); // first time
})
const pad = (num, howMany, what) => (Array(howMany).join(what) + num).slice(-howMany);

function show() {
  document.getElementById('followers').innerHTML = pad(num, 4, "0")
}
.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;
}
<title>Button testing</title>
<div class="counter-wrap">
  <div id="followers" class="counter">0000</div>
  <div class="measure-wrap">
    <span class="text-uppercase letter-spacing" style="top: 4px;">People</span>
  </div>
</div>
<div>
  <button type="button" id="join" class="button button2">Join</button>

Upvotes: 1

Related Questions