I have the following script:
<script language=javascript>
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=test size=10 id='v' name='v' value='3'>
<input type=button value='-' onclick='javascript:process(-1)'>
<a id="v" href="#" onclick='javascript:process(-1)'>minus</a>
If you click the button, it will deduct 1 from the total amount (3). The same applies for the minus-link. Now this all works great.
The problem is that I want to allow each one to deduct 1, just one time. Without disabling the button/link.
Example what I need: So I click the button: 3 -> 2. Now I click the button again, nothing will happen 2 stays 2. Now I click the minus-link, 2 -> 1. Clicking the link again, nothing will happen 1 stays 1
This can all be mixed of course. The main thing is, they each are allowed to do the -1 just one time (the first time clicked upon).
How to do this?
Kind regards, Maurice
First: You don't need the javascript:
-prefix in an onclick attribute.
You can achieve your desired behaviour by removing the onclick
method on click, as shown below, and in this fiddle: http://jsfiddle.net/XPHLU/1/
<script>
function process(v, elem){
if(elem && elem.onclick){
elem.onclick = null;
}
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=test size=10 id='v' name='v' value='3'>
<input type=button value='-' onclick='process(-1, this);'>
<a id="v" href="#" onclick='process(-1, this)'>minus</a>
<script language=javascript>
$(document).ready(function(){
$("#negativeButton, #v").one("click", {arg: -1}, function(event){
//.one() registers a 'click' event, execute it once, and unbind it.
//stop propagation to the other click events.
event.stopImmediatePropagation();
//stop from moving to href=""
event.preventDefault();
process(event.data.arg, this);
});
//optionally, you can register a .click() after this as well for the same buttons. .one() will only remove that 'one' click event.
});
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
}
</script>
<input type=test size=10 id='v' name='v' value='3'>
<input id="negativeButton" type="button" value='-' >
<a id="v" href="#">minus</a>
Since this question is tagged under jQuery, I provide you a way do do it in jQuery! Using this could help you in the long run to get a cleaner code and to fix future problems like this ;)
Demo: http://jsfiddle.net/NtHwN/4/
<input size=10 id="sum" value="3">
<input class="minus" type=button value="-">
<a class="minus" href="#">minus</a>
$(document).ready(function() {
$(".minus").one("click", function(){
var value = parseInt($("#sum").val());
$("#sum").val(value -1);
});
});
<input type=button value='-' onclick='javascript:process(-1)' id="button-to-click">
Remove the click handler:
function process(v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
document.getElementById('button-to-click').onclick = null;
}
or for multiple
<input type=button value='-' onclick='javascript:process(this, -1)'>
Remove the click handler:
function process(obj, v){
var value = parseInt(document.getElementById('v').value);
value+=v;
document.getElementById('v').value = value;
obj.onclick = null;
}
Well... this one should work. JSFiddle is here .
HTML (with minor changes):
<input type=test size=10 id='v' name='v' value='3'></input>
<input id="i" type=button value='Minus'></button>
<a id="l" href="javascript://">minus</a>
Note: I do not necessarily recommend using javascript://
.
JavaScript:
function appendEvent(id) {
document.getElementById(id).addEventListener('click', (function() {
var clicked = false;
var inputEl = document.getElementById('v');
return function() {
if (!clicked) {
var value = parseInt(inputEl .value);
inputEl.value = --value;
clicked = true;
};
};
}()));
}
appendEvent('i');
appendEvent('l');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.