javascript onclick 增量编号

Question

使用 javascript，当我单击表单按钮时，它会向数字添加 1，我该怎么做？ 它增加的数字可能在表单文本字段或其他内容中。

显然它会在 onclick 上，但我不确定代码。

Answer 1

既然你没有给我什么开始，这里是一个简单的例子。

示例实现：

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>

Answer 2

在它最基本的化身中..

JavaScript：

<script>
    var i = 0;
    function buttonClick() {
        document.getElementById('inc').value = ++i;
    }
</script>

标记：

<button onclick="buttonClick()">Click Me</button>
<input type="text" id="inc" value="0"></input>

演示

Answer 3

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>

Answer 4

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

Answer 5

var i=0; 
function increment() {           
    i++;       
    document.getElementById('number').innerHTML=i;
}

Answer 6

我知道这是一篇旧帖子，但它与我目前正在从事的工作有关。

我的目标是在 html 页面的顶部创建下一页/上一页按钮，并说我在“book.html”上，当前“显示”ID 内容为“page-1.html”通过ajax，如果我单击“下一步”按钮，它将通过ajax 加载“page-2.html”，而无需重新加载页面。

我将如何通过 AJAX 执行此操作，因为我已经看过很多示例，但其中大多数是完全不同的，并且大多数使用 AJAX 的示例都是针对 WordPress 表单和其他内容的。

目前使用下面的行将打开整个页面，我想知道如果可能的话，最好使用 AJAX 的方法:) window.location(url);

我以下面的代码为例：

var i = 1;
var url = "pages/page-" + i + ".html";

    function incPage() {
    if (i < 10) {
        i++;
        window.location = url; 
        //load next page in body using AJAX request

    } else if (i = 10) {
        i = 0;
    }
    document.getElementById("display").innerHTML = i;
}

function decPage() {
    if (i > 0) {
        --i;
        window.location = url; 
        //load previous page in body using AJAX request
    } else if (i = 0) {
        i = 10;
    }
    document.getElementById("display").innerHTML = i;
}

Answer 7

简单的 HTML + Thymeleaf 版本。 带控制器的代码

<form action="/" method="post">
                <input type="hidden" th:value="${post.getId_post()}" name="id_post">
                <input type="hidden" th:value="-1" name="valueForChange">
                <input type="submit" value="-">
</form>

这就是它的外观 - 您可以随样式更改按钮的外观。 https://i.stack.imgur.com/b97N1.png

Answer 8

是的！ 你绝对可以使用onclick或者你也可以使用addEventListener来监听点击事件。 在此代码示例中， onclick事件正在运行（使用）。

HTML代码：

<div class="container">
<p><output id="output">0</output></p>
<p><button type="button" id="btn">Increment</button></p>
</div>

Javascript代码：

(function() {
 var button = document.getElementById("btn")
 var output = document.getElementById("output")
 var number
 var counter
 

 function init() {
 // Convert string to primitve number using parseInt()
  number = parseInt(output.innerText)
  
 /**
 * Start counter by adding any number to start counting.
 * In this case the output starts from 0 so to immediately
 * invoke the button to increment the counter add 1 to start 
 * counting in natural number (counting numbers).
 */  counter = number + 1
  
  function increment() {
    // Increment counter
    value = counter++
    output.innerText = value
   }
  
   // Output the increment value for every click
    button.onclick = increment
 }

 window.onload = init
})()

演示

Answer 9

无需担心使用 Javascript 递增/递减数字。 现在 HTML 本身为它提供了一种简单的方法。

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

就是这么简单。问题是它只能在某些浏览器中正常工作。Mozilla 尚不支持此功能。

Answer 10

对于那些不想要输入框的人，这里有一个准备编译的示例，您可以查看它，它只计算按钮点击次数，在文本中更新它们并切换字体。 您可以获取该值并在任何您认为合适的地方使用它。

<!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>

Answer 11

看一下这个。

 var timeout_; function mouseDown_i() { value = isNaN(parseInt(document.getElementById('xxxx').value)) ? 0 : parseInt(document.getElementById('xxxx').value); document.getElementById('xxxx').value = value + 1; timeout_ = setTimeout(function() { mouseDown_i(); }, 150); } function mouseDown_d() { value = isNaN(parseInt(document.getElementById('xxxx').value)) ? 0 : parseInt(document.getElementById('xxxx').value); value - 1 <= 0 ? document.getElementById('xxxx').value = '' : document.getElementById('xxxx').value = value - 1; timeout_ = setTimeout(function() { mouseDown_d(); }, 150); } function mouseUp() { clearTimeout(timeout_); } function mouseLeave() { clearTimeout(timeout_); }

 <p onmousedown="mouseDown_i()" onmouseup="mouseUp()" onmouseleave="mouseLeave()">Click to INCREMENT!</p> <p onmousedown="mouseDown_d()" onmouseup="mouseUp()" onmouseleave="mouseLeave()">Click to DECREMENT!</p> <input id="xxxx" type="text" value="0">

Answer 12

 var counter = 0; function plus() { counter += 1; document.getElementById("counter").innerHTML = counter; } function minus() { if(counter > 0){ counter -= 1; } document.getElementById("counter").innerHTML = counter; }

 .container{ display: flex; align-items: center; justify-content: center; } .input-box{ height: 40px; width: 100px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; } button{ background: transparent; border: 0; cursor: pointer; font-size: 15px; padding: 5px 10px; } p{ padding: 5px 10px; }

 <div class="container"> <div class="input-box"> <button type="button" onclick="minus()" style="font-size: 20px;">-</button> <p id="counter">0</p> <button type="button" onclick="plus()">+</button> </div> </div>

Answer 13

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

Answer 14

jQuery 库必须在 head 部分。

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

javascript onclick 增量编号

问题描述

14 个解决方案

解决方案1
38 已采纳 2012-02-08 00:59:03

解决方案2
13 2012-02-08 00:59:36

解决方案3
8 2012-02-08 01:02:37

jQuery 示例

“普通”JavaScript 示例

解决方案4
1 2016-03-08 01:37:06

解决方案5
1 2018-12-14 22:34:58

解决方案6
1 2020-04-06 03:18:16

解决方案7
1 2020-10-29 12:58:37

解决方案8
1 2020-11-03 16:52:06

解决方案9
0 2013-08-09 07:23:23

解决方案10
0 2018-10-26 18:20:26

解决方案11
0 2020-11-26 10:13:24

解决方案12
0 2021-11-14 14:07:23

解决方案13
0 2022-01-04 04:50:00

解决方案14
-2 2017-12-26 21:53:45

javascript onclick 增量编号

问题描述

14 个解决方案

解决方案1 38 已采纳 2012-02-08 00:59:03

解决方案2 13 2012-02-08 00:59:36

解决方案3 8 2012-02-08 01:02:37

jQuery 示例

“普通”JavaScript 示例

解决方案4 1 2016-03-08 01:37:06

解决方案5 1 2018-12-14 22:34:58

解决方案6 1 2020-04-06 03:18:16

解决方案7 1 2020-10-29 12:58:37

解决方案8 1 2020-11-03 16:52:06

解决方案9 0 2013-08-09 07:23:23

解决方案10 0 2018-10-26 18:20:26

解决方案11 0 2020-11-26 10:13:24

解决方案12 0 2021-11-14 14:07:23

解决方案13 0 2022-01-04 04:50:00

解决方案14 -2 2017-12-26 21:53:45

解决方案1
38 已采纳 2012-02-08 00:59:03

解决方案2
13 2012-02-08 00:59:36

解决方案3
8 2012-02-08 01:02:37

解决方案4
1 2016-03-08 01:37:06

解决方案5
1 2018-12-14 22:34:58

解决方案6
1 2020-04-06 03:18:16

解决方案7
1 2020-10-29 12:58:37

解决方案8
1 2020-11-03 16:52:06

解决方案9
0 2013-08-09 07:23:23

解决方案10
0 2018-10-26 18:20:26

解决方案11
0 2020-11-26 10:13:24

解决方案12
0 2021-11-14 14:07:23

解决方案13
0 2022-01-04 04:50:00

解决方案14
-2 2017-12-26 21:53:45