admin 管理员组文章数量: 1086019
I was going to post this as a question to a problem but i later found a 'solution' (if that is what it is) and now this is more like an attempt to understand the situation.
I have a javascript code that displays the number 0 on the screen and then when a button is clicked, the number is supposed to increase according to the amount of times the button is clicked.
This was the code i used initially:
var number = 0;
$ (document).ready (function() {
document.getElementById("display").innerHTML = "Number of clicks: " + number;
$("#submit").bind ('click', function(event) {
document.getElementById("display").innerHTML = "Number of clicks: " + number++;
});
});
Problem was the button click event only worked AFTER the second click.Meaning i had to click the button twice before the incrementation worked. So i created a function:
function increment () {
number++;
return number;
}
and then changed the last line of the initial code to:
document.getElementById("display").innerHTML = "Number of clicks: " + increment();
Now the number increases the first time i click on the button. I just need to know why the first method didn't work.
I was going to post this as a question to a problem but i later found a 'solution' (if that is what it is) and now this is more like an attempt to understand the situation.
I have a javascript code that displays the number 0 on the screen and then when a button is clicked, the number is supposed to increase according to the amount of times the button is clicked.
This was the code i used initially:
var number = 0;
$ (document).ready (function() {
document.getElementById("display").innerHTML = "Number of clicks: " + number;
$("#submit").bind ('click', function(event) {
document.getElementById("display").innerHTML = "Number of clicks: " + number++;
});
});
Problem was the button click event only worked AFTER the second click.Meaning i had to click the button twice before the incrementation worked. So i created a function:
function increment () {
number++;
return number;
}
and then changed the last line of the initial code to:
document.getElementById("display").innerHTML = "Number of clicks: " + increment();
Now the number increases the first time i click on the button. I just need to know why the first method didn't work.
Share Improve this question asked Jul 26, 2014 at 3:16 Ojonugwa Jude OchalifuOjonugwa Jude Ochalifu 27.3k26 gold badges125 silver badges136 bronze badges5 Answers
Reset to default 6Use ++number instead of number++
number++ increases the value of number afterwards.
You code is running fine, even in the first time. But the value displayed is1 less than the number of the clicks.
You are using prefix increment operator (++counter). In prefix increment operation first the value is evaluated or returned and then incremented.
But in postfix increment operation (counter++) first the value will be incremented and then returned
Use the existing code and initialize the number as 1 and execute the code.
You will get the expected result.
Should you want to maintain the initialization as 0, use postfix increment operator to get the desired result.
My remendation would be not to use either of them but the below one
number += 1;
This is pretty mon in a lot of languages.
var i = 0;
1 + i++
returns 1
var i = 0;
1 + ++i
returns 2
The difference is whether the variable is incremented before or after being evaluated in the expression.
Use this
$('#target').click(function() {
$('#output').html(function(i, val) { return val*1+1 });
});
HTML is
<button id="target" type="button">Click Me</button>
<div id="output">10</div>
SEE DEMO HERE
The answer is simple, why your first code did not work for you, as expected.
var number = 0;
$ (document).ready (function() {
document.getElementById("display").innerHTML = "Number of clicks: " + number;
$("#submit").bind ('click', function(event) {
document.getElementById("display").innerHTML = "Number of clicks: " + number++;
});
});
>>> This first time when DOM element load, The Value get printed as :
output : Number of clicks: 0 // because you have initialize number as 0.
Now when you click "Click Button", you have POST-INCREMENTED the Value, means
the value get's incremented after the action is pleted. So in this case,
when you click first time, the number is still 0 and get printed again as
"Number of clicks": 0 and then the value get's incremented by Post-increment
and bee's 1. When you click for second time,
the output :"Number of click": 1 get's printed.
本文标签： jqueryJavascript Integer increment does not work unless called from functionStack Overflow
版权声明：本文标题：jquery - Javascript Integer increment does not work unless called from function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744043851a2523754.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论