jQuery示例

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>

DEMO

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

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

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

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

Answer 5

<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 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
})()

Demo

Answer 9

对于那些不希望输入框的人，这是一个可以立即编译的示例，您可以检出该示例，该示例仅计算按钮的点击次数，在文本中进行更新并切换字体。您可以使用该值，并在您认为合适的任何地方使用它。

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

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

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

jQuery Library必须在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增量编号

12 个答案:

jQuery示例

'普通'JavaScript示例