JavaScriptの追加/減算の問題

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

入力の値を取得して値を増減する必要があります。そして、あなたは変数に値を格納し、その上で操作を追加実行したいときには、変数の前に+記号を追加する必要があるとinput要素がtext性質を持っていないあなたはこの

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

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

ようにそれを設定するために valueを使用する必要がありますあなたは要素の値を取得すると、あなたが Stringとしてそれを得るでしょう、現在の値と合計10

を取得する必要がありますので、あなたはIntegerにそれを解析する必要が

Answer 2

あなたはあなたのコードを見てみると

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

Answer 3

を行うことができますし、それがフィドルを作成するのに役立つだろう。

$("#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 4

あなただけvalueを初期化する必要があります。

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

しかし、今のあなたが持っているものを見てみましょう

Answer 5

JSフィドル：https://jsfiddle.net/dtar43jp/

クリックハンドラで「value」という変数を操作します。これは、DOM要素のvalueプロパティに対応することを意図していると思われます。ただし、Element.valueに直接割り当てていない場合は、効果はありません。

jQueryを使用しているように見えるので、解決策はパラメータなしで呼び出されたときに値を文字列として返す.val()を使用し、パラメータが渡された場合は要素の値を設定します（例：.val(10) Element.valueを10に設定します）。

Answer 6

例外を防止する。

+オペレータ（$()の前に置かれています）はパーサとしても機能します（JSトリック）。

追加値：

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

減算値：あなたが ``値を初期化した

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