numéro d'incrémentation javascript onclick
Avec javascript, comment puis-je le faire pour que lorsque je clique sur un bouton de formulaire, il ajoute 1 à un nombre? Le nombre incrémenté peut être dans un champ de texte de formulaire ou quelque chose du genre.
Évidemment, ce serait sur onclick mais je ne suis pas sûr du code.
Puisque vous ne m'avez rien donné pour commencer, voici un exemple simple.
Exemple d'implémentation:
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
Exemple Html
<form>
<input type="text" id="number" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
Dans son incarnation la plus fondamentale ..
JavaScript:
<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
}
</script>
_ {Markup:} _
<button onclick="buttonClick()">Click Me</button>
<input type="text" id="inc" value="0"></input>
exemple jQuery
var $button = $('.increment-btn');
var $counter = $('.counter');
$button.click(function(){
$counter.val( parseInt($counter.val()) + 1 ); // `parseInt` converts the `value` from a string to a number
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="1" class="counter"/>
<button type="button" class="increment-btn">Increment</button>
Exemple JavaScript 'simple'
var $button = document.querySelector('.increment-btn');
var $counter = document.querySelector('.counter');
$button.addEventListener('click', function(){
$counter.value = parseInt($counter.value) + 1; // `parseInt` converts the `value` from a string to a number
}, false);
<input type="text" class="counter" value="1"/>
<button type="button" class="increment-btn">Increment</button>
Pas besoin de s'inquiéter pour incrémenter/décrémenter les nombres en utilisant Javascript. Maintenant, HTML lui-même fournit un moyen facile pour cela.
<input type="number" value="50">
C’est aussi simple que cela. Le problème est que cela ne fonctionne très bien que dans certains navigateurs. Mozilla n’a pas encore pris en charge cette fonctionnalité.
<body>
<input type="button" value="Increase" id="inc" onclick="incNumber()"/>
<input type="button" value="Decrease" id="dec" onclick="decNumber()"/>
<label id="display"></label>
<script type="text/javascript">
var i = 0;
function incNumber() {
if (i < 10) {
i++;
} else if (i = 10) {
i = 0;
}
document.getElementById("display").innerHTML = i;
}
function decNumber() {
if (i > 0) {
--i;
} else if (i = 0) {
i = 10;
}
document.getElementById("display").innerHTML = i;
}
</script>
</body>
Pour ceux qui ne veulent PAS de zone de saisie, voici un exemple prêt à compiler que vous pouvez extraire, qui ne compte que les clics de bouton, les met à jour dans le texte et qui bascule. Vous pouvez prendre la valeur et l'utiliser partout où bon vous semble.
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function incrementValue()
{
var demo_id = document.getElementById('demo')
var value = parseInt(demo_id.value, 10);
// if NaN, set to 0, else, keep the current value
value = isNaN(value) ? 0 : value;
value++;
demo_id.value = value;
if ((value%2)==0){
demo_id.innerHTML = value;
demo_id.style.fontSize = "25px";
demo_id.style.color = "red";
demo_id.style.backgroundColor = "yellow";
}
else {
demo_id.innerHTML = value.toString() ;
demo_id.style.fontSize = "15px";
demo_id.style.color = "black";
demo_id.style.backgroundColor = "white";
}
}
</script>
<form>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
</body>
</html>
var i=0;
function increment() {
i++;
document.getElementById('number').innerHTML=i;
}