Question

我正在尝试创建一个将1设置为已设置的值（0001、0002、0003等）的按钮。这是我到目前为止所拥有的；任何帮助表示赞赏。

我已经尝试了很多其他方法，这是我所获得的，并且我对编码的知识有限，因此我寻求帮助。我怀疑问题出在Javascript，但我不知道。

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>

Answer 1

如前所述，增加后，str不是字符串。不使用原型的充分理由。这是一个不使用内联事件行onload的更干净的版本

请注意，我给按钮指定了一个ID，并将函数的名称更改为它们实际执行的操作。

当计数=== 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>

为什么此Javascript计数器不起作用？

1 个答案: