Question

我对javascript很新，但是我需要一种JS方法来在按钮点击时增加/减少输入字段中的值。我将我的值设置为成功显示0但是当我单击添加按钮时它不会增加。

以下是html和JS中的代码：

HTML：

<input type="text" class="md-input" id="{{ $quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'   />
<button id="add" class="add-button md-btn md-btn-success"  style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>

使用Javascript：

@section('loadjs')
<script src="{{ jfi\asset_cb('/js/pagination.js') }}"></script>
<script src="{{ jfi\asset_cb('/bower_components/uikit/js/components/slider.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/factory.js') }}"></script>
<script src="{{ jfi\asset_cb('/js/jquery.min.js') }}"></script>
<script
$("#add").click(function(){
var value = $("#value").val();
value = +value + 10;
$("#value").val(value);
});
></script>
@endsection

我在JS方面缺少什么？

Answer 1

查看您的代码，这将有助于创建一个小提琴。但是现在让我们来看看你有什么：

$("#add").click(function(){

// Here you count up value but don't tell your code what value is?
// so add my line below
value = $("#value").val();
// I've force value back to a number by *1 
value = (value*1) + 10;
// Then your code resets the value to the new value
$("#value").text(value);
});

根据您的使用场景，您还可以使用缓存机制，如下所示：

  // I create the value var outside my event handler
   var value = $("#value").val();
   // Or if i know that it will always start on zero
   var value = 0 

   $("#add").click(function(){

    // here the addition of 10 will compound and be remembered
    // since the value var is outside my event handler,  
    value = value + 10;
    // Then your code resets the value to the new value
    $("#value").text(value);
    });

Answer 2

您只需要初始化value：

var value = 0;
$("#add").click(function(){
value = value + 10;

Answer 3

您需要获取输入值，然后增加或减少该值。当您将值存储在变量中并希望对其执行添加操作时，您需要在变量之前添加+符号，而input元素不需要text属性使用value将其设置为

＆＃13;

$("#add").click(function(){
var value = $("#value").val();
value = +value + 10;
$("#value").val(value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="md-input" id="value" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'   />
<button id="add" class="add-button md-btn md-btn-success"  style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>

＆＃13;

Answer 4

你可以做到

var value = $("#value").val() + 10;

Answer 5

JS小提琴：https://jsfiddle.net/dtar43jp/

你在点击处理程序中操作一个名为“value”的变量，我猜你可能想要与DOM Element的value属性相对应。但是，如果您没有直接分配给Element.value，那将无效。

由于您似乎正在使用jQuery，因此解决方案是使用.val()，它将在没有参数的情况下返回值（作为字符串），并且如果传递参数将设置Element的值（例如.val(10)将Element.value设置为10）。

Answer 6

你必须得到当前值并总和10.

当您获得元素的值时，您将其作为String获取，因此您必须将其解析为Integer以防止例外。

正如您所见，+运算符（位于$()之前）也可用作解析器（JS技巧）。

添加值

$("#add").click(function(){
    $("#value").text((+$('#value').val()) + 10);
});

减去价值：

$("#sub").click(function(){
    $("#value").text((+$('#value').val()) - 10);
});

Javascript加/减问题

6 个答案: