Javascript 单击按钮后增加计数器值_Javascript_Jquery

Javascript 单击按钮后增加计数器值

javascript jquery

Javascript 单击按钮后增加计数器值,javascript,jquery,Javascript,Jquery,我似乎无法获得工作所需的jQuery位。我以前从未使用过jQuery，但我希望在我的页面上有一个按钮，当单击该按钮时，将最初的0值增加1。我的问题类似于和，但我无法理解我做错了什么。以下是我所拥有的： <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text

我似乎无法获得工作所需的jQuery位。我以前从未使用过jQuery，但我希望在我的页面上有一个按钮，当单击该按钮时，将最初的0值增加1。我的问题类似于和，但我无法理解我做错了什么。以下是我所拥有的：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$("#update").click(function()
{
    $("#counter")++;
}
</script>
</head>
<body>

<input type="text" name="TextBox" id="TextBox" value="0" />
<input type="Button" id='AddButton' value="+" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$('#AddButton').on('click', function ()
{
    var input = $('#TextBox');
    input.val(parseInt(input.val()) + 1);
})
</script>

</body>
</html>


$（“#更新”）。单击（函数（）
{
$（“#计数器”）+；
}
$（'AddButton'）。在（'click'，函数（）
{
变量输入=$（“#文本框”）；
val（parseInt（input.val（））+1）；
})

非常感谢您的帮助。请原谅我犯下的任何重大错误，我现在还不知道该怎么做。谢谢您，好消息！=）

应该是：

var counter = 0;
$("#update").click(function()
{
    counter++;
});

演示此

如果计数器是一个变量，则需要定义它（

var-counter；

），并且忘记关闭“单击”）。注意最后额外的

）

。您所做的是增加一个jQuery对象（解释原因的好主意）

如果您想将值放入另一个字段（现在我猜是这样），比如输入字段，您可以这样做：

var val;
$("#update").click(function()
{
   val = $('#counter').val();
   val++;
   $('#counter').prop('value',val )
});

此演示应为：

var counter = 0;
$("#update").click(function()
{
    counter++;
});

演示此

如果计数器是一个变量，则需要定义它（

var-counter；

），并且忘记关闭“单击”）。注意最后额外的

）

。您所做的是增加一个jQuery对象（解释原因的好主意）

如果您想将值放入另一个字段（现在我猜是这样），比如输入字段，您可以这样做：

var val;
$("#update").click(function()
{
   val = $('#counter').val();
   val++;
   $('#counter').prop('value',val )
});

此演示

很明显，您是jQuery新手，因此一本好的读物可能会对您有所帮助，我建议首先使用jQuery

至于这个问题，我重写了你的代码，它应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <title> My first increment </title>
    </head>
    <body>

        <input type="text" name="TextBox" id="TextBox" value="0" />
        <input type="Button" id='AddButton' value="+" />

        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#AddButton').click( function() {
                    var counter = $('#TextBox').val();
                    counter++ ;
                    $('#TextBox').val(counter);
                });
            });
        </script>
    </body>
</html>


我的第一个增量
$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
var counter=$（'#TextBox'）.val（）；
计数器++；
$（“#文本框”）.val（计数器）；
});
});

下面是一个小测试：

我们的想法是增加一个变量而不是一个对象，并且您也有一些语法错误，但是尝试一下这段代码，我们可以在注释中进一步讨论它

祝你好运

很明显，您是jQuery新手，因此阅读一本好书可能会对您有所帮助，我建议首先使用jQuery

至于这个问题，我重写了你的代码，它应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <title> My first increment </title>
    </head>
    <body>

        <input type="text" name="TextBox" id="TextBox" value="0" />
        <input type="Button" id='AddButton' value="+" />

        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#AddButton').click( function() {
                    var counter = $('#TextBox').val();
                    counter++ ;
                    $('#TextBox').val(counter);
                });
            });
        </script>
    </body>
</html>


我的第一个增量
$（文档）.ready（函数（）{
$（“#添加按钮”）。单击（函数（）{
var counter=$（'#TextBox'）.val（）；
计数器++；
$（“#文本框”）.val（计数器）；
});
});

下面是一个小测试：

我们的想法是增加一个变量而不是一个对象，并且您也有一些语法错误，但是尝试一下这段代码，我们可以在注释中进一步讨论它

祝你好运

（这只是对其他答案的补充）

您只需在所有其他js

src

s之前加载一次：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

一直这样做，直到找到一个不使用纯jQuery的理由

假设最后一个计数器中的

$（'#TextBox'）

永远无法更改，您可能希望：

$('#TextBox').val(0);
$('#AddButton').click( function() {
    $('#TextBox').val(parseInt($('#TextBox').val()) + 1);
});

但是，如果希望用户更改

文本框

，则只要单击

AddButton

，就将计数器设置回递增计数器，假设

计数器

应从

0开始：
counter = 0;
$('#AddButton').click( function() {
    counter++;
    $('#TextBox').val(counter);
});

（这只是对其他答案的补充）
您只需在所有其他jssrc
s之前加载一次：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

一直这样做，直到找到一个不使用纯jQuery的理由
假设最后一个计数器中的$（'#TextBox'）
永远无法更改，您可能希望：
$('#TextBox').val(0);
$('#AddButton').click( function() {
    $('#TextBox').val(parseInt($('#TextBox').val()) + 1);
});

但是，如果希望用户更改文本框
，则只要单击AddButton
，就将计数器设置回递增计数器，假设计数器
应从0开始：
counter = 0;
$('#AddButton').click( function() {
    counter++;
    $('#TextBox').val(counter);
});

这可以使用纯html和JS完成，并附加以下代码
<b>
<button id="btn" onclick="this.innerHTML=++this.value" value=0 >0</button>
</b>


0
这可以使用纯html和JS完成，并附加以下代码
<b>
<button id="btn" onclick="this.innerHTML=++this.value" value=0 >0</button>
</b>


0
这是因为你不能增加jQuery对象，OP就是这么做的。这是因为你不能增加jQuery对象，OP就是这么做的。元素update
和counter
在哪里？为什么要包含两次jquery？$（“#counter”）
返回Id为“counter”的（包装的）DOM元素的句柄。该元素可能有一个可以递增的数值属性，但该元素本身不是一个数字，因此不能递增。为什么要向下投票？好的，有错误，但老实说，问答格式是尊重的，有代码。。。我们可以帮助引导人们了解和提高自己，毕竟这不是STO的全部内容吗？元素update
和counter
在哪里？为什么要包含两次jquery？$（“#counter”）
返回Id为“counter”的（包装的）DOM元素的句柄。该元素可能有一个可以递增的数值属性，但该元素本身不是一个数字，因此不能递增。为什么要向下投票？好的，有错误，但老实说，问答格式是尊重的，有代码。。。我们可以帮助引导人们了解和提高自己，毕竟这不是STO的全部内容吗？这个
将指的是#AddButton
，不是吗？实际上，你可以，但不是关于这个，是++