Need javascript that add values together (live result), without clicking a = button

I need to make kind of a "calculator" with buttons, with the values 1 to 10. Then, when i for example press "1", a result box will display "1", and then when i press "4" the result will automatically print "5", without having to press a "=" button.

I only need it to add values together, and have a reset function.

Javascript is pretty new for me. I'm not so good at writing it yet, but i understand almost everything.

Really hope someone can help me!

This is my current code:

    <html>
<head>
<style type="text/css">
table.calc {
     border: 2px solid #0034D1;
     background-color: #809FFF;
}
input.calc {
     width: 100%;
     margin: 5px;
}
</style>

<script>
function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

</script>
</head>

<body>
<table class="calc" cellpadding=4>
<tr><td colspan=3><input class="calc" id="screen" type="text"></td></tr>
<tr>
<td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
</tr>
<tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
</table>

</body>
</html>

Solution

You're using the JavaScript "feature" of concatenating strings together (string + number also equals string), so you need parseInt around each number. Also, since I'm using parseInt, need to set the screen value to 0 (zero) instead of ''

<input class="calc" id="screen" value="0" type="text">

then change this:

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '0';
     }
     else {
          document.getElementById('screen').value = 
            parseInt(document.getElementById('screen').value) + 
            parseInt(buttonValue);
     }
}

Note: Pressing . (dot) or + (plus) causes an error. I think you need to call a separate function when that's pressed.