Javascript on button click add value to text box

Question

Just a super simple javascript question, but i cannot find out how it works

Need to get script output to the input.

original script on http://jsfiddle.net/mYuRK/

Thanks!

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('.tussenstand').text("Total: "+theTotal);        
});

$('.tussenstand').text("Total: "+theTotal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tussenstand">

<button value="1">1</button>
<button value="2">2</button>
<button value="4">4</button>
<button value="6">6</button>

Use #tussenstand instead of .tussenstand as selector.

Guffa
– Guffa

2015-03-21 18:06:21 +00:00
Commented Mar 21, 2015 at 18:06 — Guffa
– Guffa, Commented Mar 21, 2015 at 18:06
@Guffa , the text should be replaced with the val , as well

Asif Mehmood
– Asif Mehmood

2015-03-21 18:26:08 +00:00
Commented Mar 21, 2015 at 18:26 — Asif Mehmood
– Asif Mehmood, Commented Mar 21, 2015 at 18:26

DonovanM · Accepted Answer · 2015-03-21 18:09:40Z

6

Since you're using an id for the input you need to use # instead of . for the selector. And for input you have to assign the value.

So instead of $('.tussenstand').text( use $('#tussenstand').val(.

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('#tussenstand').val("Total: "+theTotal);        
});

$('#tussenstand').val("Total: "+theTotal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tussenstand">

<button value="1">1</button>
<button value="2">2</button>
<button value="4">4</button>
<button value="6">6</button>

answered Mar 21, 2015 at 18:09

DonovanM

1,1981 gold badge13 silver badges18 bronze badges

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

Comments

Artur Filipiak · Accepted Answer · 2015-03-21 18:55:58Z

4

Change the class selector to an id selector in your JS, and use val() instead of text().

var theTotal = 0;
$('button').click(function(){
   theTotal = Number(theTotal) + Number($(this).val());
    $('#tussenstand').val("Total: "+theTotal);        
});

$('#tussenstand').val("Total: "+theTotal);

val() is what jQuery uses to edit/retrieve the value of a textbox.

edited Mar 21, 2015 at 18:55

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

answered Mar 21, 2015 at 18:08

Firedrake969

7738 silver badges22 bronze badges

Comments

Asif Mehmood · Accepted Answer · 2015-03-21 18:11:58Z

0

Use this SCRIPT:

<script>
        function insertTextInInputValue(buttonValueIs){
            var inputElementIs = document.getElementById("tussenstand");
            inputElementIs.value = inputElementIs.value + buttonValueIs;
        }
    </script>

with the HTML:

<input id="tussenstand">
<button onclick="insertTextInInputValue(1);">1</button>
<button onclick="insertTextInInputValue(2);">2</button>
<button onclick="insertTextInInputValue(3);">3</button>
<button onclick="insertTextInInputValue(4);">4</button>
<button onclick="insertTextInInputValue(5);">5</button>
<button onclick="insertTextInInputValue(6);">6</button>

answered Mar 21, 2015 at 18:11

Asif Mehmood

9942 gold badges17 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript on button click add value to text box

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related