номер приращения javascript onclick - PullRequest
Новая
       2

номер приращения javascript onclick

6 голосов
/ 08 февраля 2012

С помощью javascript, как я могу это сделать, чтобы при нажатии кнопки формы она добавляла 1 к числу?Число, которое это увеличивает, могло быть в текстовом поле формы или кое-чем.

Очевидно, он будет включен, но я не уверен в коде.

Ответы [ 8 ]

28 голосов
/ 08 февраля 2012

Поскольку вы не дали мне начать, вот простой пример.

jsFiddle

Пример реализации: 

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

Пример Html 

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
8 голосов
/ 08 февраля 2012

В самом основном воплощении ..

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>
7 голосов
/ 08 февраля 2012

Пример 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>

«Простой» пример JavaScript 

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>
1 голос
/ 08 марта 2016 
<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 голос
/ 09 августа 2013

Не нужно беспокоиться об увеличении / уменьшении чисел с помощью Javascript. Теперь сам HTML предоставляет простой способ для этого. 

<input type="number" value="50">

Это так просто. Проблема в том, что он работает нормально только в некоторых браузерах. Mozilla пока не поддерживает эту функцию.

0 голосов
/ 15 декабря 2018 
var i=0; 
function increment() {           
    i++;       
    document.getElementById('number').innerHTML=i;
}
0 голосов
/ 26 октября 2018

Для тех, кому НЕ нужно поле ввода, вот готовый к компиляции пример, который вы можете проверить, который просто считает нажатия кнопок, обновляет их в тексте и переключает шрифт.Вы можете взять значение и использовать его где угодно. 

<!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 голосов
/ 27 декабря 2017

Библиотека jQuery должна находиться в разделе заголовка. 

<button onclick="var less = parseInt($('#qty').val()) - 1; $('#qty').val(less);"></button>
<input type="text" id="qty" value="2">
<button onclick="var add = parseInt($('#qty').val()) + 1; $('#qty').val(add);">+</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...