web-dev-qa-db-fra.com

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.

javascriptonclicknumbers
5
user1022585

Puisque vous ne m'avez rien donné pour commencer, voici un exemple simple.

jsFiddle

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>
27
Gabe

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>
8
paislee

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>

7
pseudosavant

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é.

1
Ganesh Babu
<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>
1
krttk

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>
0
Eric Baker
var i=0; 
function increment() {           
    i++;       
    document.getElementById('number').innerHTML=i;
}
0
Shivananda Alva