[英]Keep button from decrementing a number after 1st use with Javascript
I'm trying to keep track of the number of items a user has clicked on by removing one from the counter span using a basic JS function. 我试图通过使用基本的JS函数从计数器范围中删除一项来跟踪用户单击的项目数。 I have to keep track of anywhere between 5 to 10 items so each time the button is clicked I am removing one from the div span that keeps count.
我必须跟踪5到10个项目之间的任何位置,因此每次单击该按钮时,我都会从div范围中删除一个保持计数的项目。 It's working but I do not want it going to negative values.
它正在工作,但我不希望它变为负值。 How do I keep the button from removing 1 after it has been used once?
使用一次后,如何防止按钮移开1? Basically, I want the function to only fire once for each button.
基本上,我希望该功能仅对每个按钮触发一次。
Here is the codepen as it is now: CODEPEN 这是现在的codepen : CODEPEN
Here is what I have right now: 这是我现在所拥有的:
var currentValue = 9;
var add = function(valueToAdd){
currentValue += valueToAdd;
document.getElementById('number').innerHTML = currentValue;
if (this.currentValue == 0) {
alert("YOU ARE AT 0 ");
currentValue - 0
}
if (!isNaN(currentValue) && currentValue > 0) {
// Decrement one
currentValue - 1;
} else {
return false;
}
};
HTML: HTML:
<div id="text">Number of items:<span id="number">9</span><div>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
You have great interest in inserting the buttons programmatically, you'll have a much greater flexibility. 您对以编程方式插入按钮非常感兴趣,您将拥有更大的灵活性。 And you can hook the function to a function that you bind to have the right
this
. 你可以挂钩的功能,绑定有正确的功能
this
。 Below is the code for buttons that handle a 'quantity' property, and disable themselves when quantity reaches 0. 以下是处理“数量”属性并在数量达到0时禁用自身的按钮的代码。
http://codepen.io/anon/pen/gJtry http://codepen.io/anon/pen/gJtry
<div id="text">Number of items:<span id="number">9</span>
<div id="oneTimeButtons">
</div>
<div id='youDidIt' hidden>!!! You did it !!!</div>
code : 代码:
var buttonCount = 9;
var quantityPerButton = 1; // try 2 or more
var totalValue = 0;
var gID=document.getElementById.bind(document);
var elem = gID('oneTimeButtons');
for (var i=0; i<buttonCount; i++) {
var bt = document.createElement('button');
bt.id='qttBt'+i;
bt.onclick = add.bind(bt, -1);
bt.quantity=quantityPerButton;
totalValue+=bt.quantity;
bt.buildTitle = function( i) {
this.innerHTML='Qtty button '+i+' ('+this.quantity+')';
}.bind(bt, i);
bt.buildTitle();
elem.appendChild(bt);
}
gID('number').innerHTML=totalValue;
function add (valueToAdd) {
this.quantity+=valueToAdd;
this.buildTitle();
if (this.quantity ==0) this.disabled=true;
totalValue += valueToAdd;
gID('number').innerHTML = totalValue;
if (totalValue == 0) {
console.log("YOU ARE AT 0 ");
gID('youDidIt').hidden=false;
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.