There are a couple of things a little wonky about what you're doing. Firstly, you aren't passing the values from the inputs to your function; you're passing the elements themselves. Secondly, in the attempt to write the value to the document you are again referencing an element and not the element's value. Lastly, you would be attempting to add together the elements (or their string values, if you were retrieving them), which would only concatenate together into a new string instead of performing the actual math.
This is my approach to really cleaning up and fixing your attempt:
First, let's get rid of the ugly and obtrusive onclick event handler altogether (we'll wire up the event handler differently later):
<input type="button" id="Summa" value="Calculate sum"/>
Add a third input so we can display the sum:
<input type="text" id="sumnumber" />
And now let's do all the JavaScript work in one place, as the last thing before your closing </body> tag. This keeps the HTML clean and not littered with inline JavaScript, so you don't have to dig through it when you need to make changes.
...
<script type="text/javascript">
// Your new summing function definition that takes input values
function summa(valueOne, valueTwo) {
// Convert the strings to numbers before doing the math
return Number(valueOne) + Number(valueTwo);
}
// Now let's hold onto some references to the elements in the page
var sumButton = document.getElementById('Summa');
var firstNumber = document.getElementById('firstnumber');
var secondNumber = document.getElementById('secondnumber');
var sumNumber = document.getElementById('sumnumber');
// Wire up the event
sumButton.onclick = function() {
// Re-use the variables outside of this scope to retrieve
var sum = summa(firstNumber.value, secondNumber.value);
// Update the sum element with the result of the function
sumNumber.value = sum.toString();
};
</script>
</body>
Here's a working jsFiddle Demo.
Note: If this were going to be production code and not just a teaching example, there are other things I would do, including: (1) number validation, and (2) lock down the inputs (maxlength, etc.) and outputs (update to a <span> or similar), among other minor things.
summa()implementation just for good measure?