calculator - Javascript on button click add value to text box - Stack Overflow

admin管理员组

文章数量:1320864

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 /

Thanks!

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

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

<script src=".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>

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

• javascript
• calculator

Share Improve this question Follow asked Mar 21, 2015 at 18:01 Joran DobJoran Dob 36055 silver badges2020 bronze badges 2

• 1 Use #tussenstand instead of .tussenstand as selector. – Guffa Commented Mar 21, 2015 at 18:06
• @Guffa , the text should be replaced with the val , as well – Asif Mehmood Commented Mar 21, 2015 at 18:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./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>

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.

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>

本文标签： calculatorJavascript on button click add value to text boxStack Overflow