为什么这个 Javascript 计数器不起作用？
[英]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).
我正在尝试制作一个将 1 添加到已设置值（0001、0002、0003 等）的按钮。 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.我怀疑问题出在 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>
1 个解决方案
解决方案1
1 已采纳 2019-11-10 07:17:32
As mentioned, the str is not a string after you increment.如前所述，增加后 str 不是字符串。 A good reason to not use prototype.不使用原型的一个很好的理由。 Here is a cleaner version not using inline events line onload这是一个更简洁的版本，不使用内联事件行 onload
Note I gave the button an ID and changed the names of the function to what they were actually doing.请注意，我给按钮一个 ID，并将 function 的名称更改为他们实际在做什么。
I would actually add code to change People to Person when count is === 1当 count 为 === 1 时，我实际上会添加代码以将 People 更改为 Person
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.