Javascript add/subtract issue

Question

I'm very new to javascript but I need a JS way to increment/decrement a value in my input field upon button click. I have my value set to show 0 successfully but when I click the add button it doesn't increase.

Here is the code in html and 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

What am I missing in the JS side?

Answer 1

Looking at your code and it would help to create a fiddle. But for now lets look at what you have:

$("#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);
});

Depending on your use scenario you can also use a caching mechanism as follows:

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

You just need to initialize value :

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

Answer 3

You need to fetch the value of input and then increase or decrease the value. And when you store the value in variable and wants to perform add operation on it you need to add + sign before variable and input elements don't have text property you need to use value to set it like this

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

Answer 4

你可以做

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

Answer 5

JS Fiddle here: https://jsfiddle.net/dtar43jp/

You're manipulating a variable called "value" in your click handler, which I'm guessing you might be intending to correspond to the DOM Element's value property. However, if you're not assigning to Element.value directly, that will have no effect.

Since you appear to be using jQuery, the solution is to use .val() , which will return the value (as a string) when called with no parameters, and will set the value of the Element if passed a parameter (eg .val(10) sets the Element.value to 10).

Answer 6

You have to get the current value and sum 10.

When you get an element's value you'll get it as a String , so you have to parse it to an Integer to prevent exceptions.

As you can see the + operator (placed before the $() ) works as a parser as well (JS trick).

Add value:

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

Subtract value:

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