Cant change input value with simple jquery

Question

When I click button .one I want .res value to + 1 but it doesnt seem to work

$(".one").click(function(){
    $('.res').val() + 1;
})

<input class="res" src="0">
<button class="one">1</button>

.val gets the value - don't think the src attribute is valid for an input (unless it is an image input) — Pete
– Pete, Commented Aug 29, 2019 at 9:16
Firstly, you're using the getter, not the setter. See the docs: api.jquery.com/val. Secondly, the input should have value="0", not src="0" — Rory McCrossan
– Rory McCrossan, Commented Aug 29, 2019 at 9:17

Nick · Accepted Answer · 2019-08-29 09:19:41Z

2

You're not saving the value back into $('.res'). Also note that you need to use parseInt (or possibly parseFloat) to convert the string value to a number, and you should set the initial value of $('.res') with value, not src:

$(".one").click(function(){
    $('.res').val(parseInt($('.res').val()) + 1);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="res" value="0">
<button class="one">1</button>

edited Aug 29, 2019 at 9:19

answered Aug 29, 2019 at 9:16

Nick

147k23 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stafilo Over a year ago

Your script returns NaN

Nick Over a year ago

@stafilo in what situation?

Nick Over a year ago

My bad. Only tested by putting an actual value in there and pressing the button. Code and explanation corrected.

Jack Bashford · Accepted Answer · 2019-08-29 09:20:23Z

0

You need to save the value back to res.val - currently it's an orphaned expression:

$(".res").val(+($(".res").val()) + 1);

answered Aug 29, 2019 at 9:20

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

Max Voisard · Accepted Answer · 2019-08-29 09:26:23Z

0

You're giving the <input> tag a src of 0 when it should be value:

<input class="res" value="0">

The jQuery is also syntactically incorrect, consider this instead:

var counter = $(".res").val();
$(".one").click(function(){
    counter++;
    $(".res").val(counter);
});

edited Aug 29, 2019 at 9:26

answered Aug 29, 2019 at 9:18

Max Voisard

1,9721 gold badge11 silver badges20 bronze badges

2 Comments

Rory McCrossan Over a year ago

What happens if someone types a different number in to the input?

Max Voisard Over a year ago

That would apply to any of the answers given. You could simply set the textbox to disabled="disabled" or readonly="readonly" in the HTML.

Collectives™ on Stack Overflow

Cant change input value with simple jquery

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related