logo

JavaScript zvýší číslo čítače po kliknutí na tlačítko | Příklad kódu

Puristickým způsobem, jak toho dosáhnout, by bylo přidat k tlačítku obslužné rutiny událostí a zvýšit tak číslo čítače v JavaScriptu.

Příklady zvýšení počtu počítadel v JavaScriptu

Příklady kódu HTML s „Plain ‘ JavaScript:-

1. Zvýšit hodnotu proměnné čísla

Vytvořte proměnnou JavaScriptu a zvyšte tuto proměnnou při stisknutí tlačítka (bez odeslání formuláře).

Protipříklad: jak zvýšit proměnnou JavaScriptu na základě události stisknutí tlačítka webové stránky.

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript">
        var counter = 0;
        function increment(){
            counter++;
            console.log(counter);
        }
    </script>

</head>
<body>
  <input type="button" onClick="increment()" value="Increment"/>
</body>
</html>

Výstup :

2. Zvýšit hodnotu prvku

Udělejme proměnnou čítače, která zvýší hodnotu, když kliknete na tlačítko. V HTML používáme dva prvky.

První textové a druhé id tlačítko, po kliknutí na tlačítko textový vstup zvýší aktuální hodnotu o jednu.

<!DOCTYPE html>
<html>
<body>
    <form>
     <input type="text" id="number" value="0"/>
     <input type="button" onclick="incrementValue()" value="Increase" />
 </form>

 <script>
    function incrementValue()
    {
        var value = parseInt(document.getElementById('number').value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        document.getElementById('number').value = value;
    }
</script>

</body>
</html>

Výstup :

Napište komentář, pokud máte nějaké pochybnosti a návrhy k tomuto tématu.

Poznámka: Všechny příklady kódů JS jsou testovány v prohlížečích Firefox a Chrome.

OS:Windows 10

Kód:HTML 5 verze