error [Object Htmlinputelement]null I just started on the programming do n know q is wrong

Question

Document

summing up

<input type="number" id="l">
<input type="number" id="e">
<button type="button" onclick="calcula()" id="h">calcular</button>

<script>
    var n1 = document.getElementById('l')
    var n2 = document.getElementById('E')
    var n3 = n1 + n2

        function calcula() {
            document.write(`o resutado e:`+ n3)
        }
</script>

Answer 1

What you’re actually doing is adding two HTML elements, but not their values

var n1 = document.getElementById('l') in this case n1 it is not the value of your input, but it is an object with a reference to your input, you can open the browser console you are usually using by pressing F12, so that you can get more detailed information about the variables you declare, for example: console.log(n1) will not print the value of your input, but the object that refers to your input, through this you can get the value that is inside the input simply by calling n1.value, then in your case it would be:

<script>
    var n1 = document.getElementById('l');
    var n2 = document.getElementById('e');
    var n3 = n1.value + n2.value

        function calcula() {
            document.write(`o resutado e:`+ n3)
        }
</script>

But there is still an error, when you click on the function button calcula is called and within it you are printing the value of n3, which was calculated at the beginning of the script and was not reset to the current values, so the right way to do it would be:

var n1 = document.getElementById('l')
var n2 = document.getElementById('e')

function calcula() {
  var n3 = n1.value + n2.value;
   document.write(`o resutado e:`+ n3)
}

When you take the value of an input, it will return you a representation of that value as a string, that is a text, so to do mathematical operations, you need to convert these values into numbers again, and for that you can use the method parseInt if you are adding integers, or parseFloat if they are decimal.

function calcula() {
  const v1 = parseFloat(n1.value);
  const v2 = parseFloat(n2.value);
  var n3 = v1 + v2;
  document.write(`o resutado e:`+ n3)
}

Pay attention to the Input of type number plus numbers accepted also - and the value e which is a mathematical constant, such values if present in your text can generate an error during the conversion to number, and you can see something like NaN as a result of its mathematical operation, which means Not a Number, if this happens it means that their initial values were not numbers.

In this way n3 will be recalculated every time you call the method calcula.

I suggest you read a little the documentation available by W3schools, which will help you a lot in this initial process. There are several examples like yours, avoid asking questions that have already been answered other times here or that you can easily find the answer in documentation.

HTML DOM Input Number Object