当前位置： 文江博客话题详情

onclick 增量数

发布于 2025-01-03 15:48:16 字数 96 浏览 2 评论 0原文

使用 JavaScript，如何才能在单击表单按钮时为数字加 1？ 它增加的数字可能位于表单文本字段或其他内容中。

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

原文

With JavaScript, how can I do it so when I click a form button it adds 1 to a number?
The number it increments could be in a form text field or something.

Obviously it'd be on onclick but I'm not sure of the code.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（14）

花间憩 2025-01-10 15:48:17

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

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

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

No need to worry for incrementing/decrementing numbers using Javascript. Now HTML itself provides an easy way for it.

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

It is that simple.The problem is that it works fine only in some browsers.Mozilla has not yet supported this feature.

回复 原文
枫以 2025-01-10 15:48:17

对于那些不需要输入框的人，您可以查看以下可立即编译的示例，该示例仅计算按钮单击次数，在文本中更新它们并切换字体。您可以获取该值并在您认为合适的任何地方使用它。

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

For those who do NOT want an input box, here's a ready-to-compile example you can check out, which just counts the button clicks, updates them in the text and toggles the font. You could take the value and use it anywhere you see fit.

<!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>
回复 原文
无边思念无边月 2025-01-10 15:48:17
var i=0; 
function increment() {           
    i++;       
    document.getElementById('number').innerHTML=i;
}

var i=0; 
function increment() {           
    i++;       
    document.getElementById('number').innerHTML=i;
}
回复 原文
千と千尋 2025-01-10 15:48:17

看看这个。

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

Check this out.

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

回复 原文
壹場煙雨 2025-01-10 15:48:17
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>

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>

回复 原文
埖埖迣鎅 2025-01-10 15:48:17
<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>

<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>
回复 原文
睫毛上残留的泪 2025-01-10 15:48:17

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

jQuery Library must be in the head section then.

<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>
回复 原文
慕烟庭风 2025-01-10 15:48:16

由于您没有给我任何开始的机会，所以这是一个简单的例子。

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>

Since you gave me nothing to start on, here is a simple example.

jsFiddle

Example implementation:

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

Example Html

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
回复 原文
久夏青 2025-01-10 15:48:16

最基本的形式..

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>

In its most basic incarnation..

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>
回复 原文
记忆之渊 2025-01-10 15:48:16

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>

jQuery Example

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>

'Plain' JavaScript Example

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>

回复 原文
望笑 2025-01-10 15:48:16

是的！您绝对可以使用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
})()

演示

Yes! You can definitely use onclick or you can also use addEventListener to listen a click event. In this code sample the onclick event is in action(use).

HTML code:

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

Javascript code:

(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

回复 原文
老子叫无熙 2025-01-10 15:48:16
<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>

<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>
回复 原文
回忆躺在深渊里 2025-01-10 15:48:16

我知道这是一篇旧帖子，但它与我目前正在做的事情相关。

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

我将如何通过 AJAX 来做到这一点，因为我已经看到了很多示例，但其中大多数是完全不同的，并且大多数使用 AJAX 的示例都是针对 WordPress 表单之类的。

目前使用下面的行将打开整个页面，我想知道如果可能的话使用 AJAX 的最佳方法:)
窗口.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;
}

I know this is an old post but its relevant to what I'm working on currently.

What I'm aiming to do is create next/previous page buttons at the top of a html page, and say I'm on 'book.html', with the current 'display' ID content being 'page-1.html' through ajax, if i click the 'next' button it will load 'page-2.html' through ajax, WITHOUT reloading the page.

How would I go about doing this through AJAX as I have seen many examples but most of them are completely different, and most examples of using AJAX are for WordPress forms and stuff.

Currently using the below line will open the entire page, I want to know the best way to go about using AJAX instead if possible :)
window.location(url);

I'm incorportating the below code as an example:

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;
}
回复 原文
烟酒忠诚 2025-01-10 15:48:16

简单的 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.sstatic.net/b97N1.png

Simple HTML + Thymeleaf version. Code with Controller

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

This is how it looks - look of buttons you can change with style.
https://i.sstatic.net/b97N1.png

回复 原文
~没有更多了~

关于作者

爱她像谁

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文