I have tried before, but it doesn't work. Is it any wrongs of the code?
<script type ="text/javascript">
function count()
{
var x = 0;
x += 1;
document.getElementById( "counting" ).value = x;
}
</script>
</head>
<body>
<input type ="button" value = "Click" onclick = "count()"/><br><br>
<input id = "counting" type = "text" />
</body>
Approach: First, we will create a HTML button and a paragraph element where we display the button click count. When the button is clicked, the JavaScript function called. We declare a count variable and initialize it to 0. When user clicks the button, the count value increased by 1 and display it on the screen.
You can use jQuery's toggleClass function for that: $(" ... "). click(function() { $(this). toggleClass("someClass"); });
you need to move the line var x = 0;
to somewhere outside of the function count
in order for it to be in the global scope. This means that changes made to it by the function count
will persist.
e.g.
var x = 0;
function count() {
x += 1;
document.getElementById( "counting" ).value = x;
}
X appears to be declared as a local variable, so it's going to be reset to zero every time the function is called. Try moving "var x = 0;" outside the function (into global scope).
You are initializing x to 0 every time the button is clicked.
Try var x=0;
outside the function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With