CODEWITHSUNDEEP
javascript
Alec_ccc
Alec_ccc

Reputation: 83

Why the button object can not use the onclick() function?

I am trying to use javascript to create a web calculator. I hope that users can calculate the result when they click the different buttons. However, there is an error in line16(Uncaught TypeError: Cannot read property 'onclick' of null). I hope someone could help me. These are my codes:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        
        </style>
        <script type="text/javascript">
            var btnadd,btnsub,btnmul,btndiv;
            btnadd = document.getElementById('btnadd');
            btnsub = document.getElementById('btnsub');
            btnmul = document.getElementById('btnmul');
            btndiv = document.getElementById('btndiv');
            
            btnadd.onclick() = function(){
                cal(add());
            }
            
            
            function cal(func){
                var num1 = document.getElementById('num1').value;
                var num2 = document.getElementById('num2').value;
                parseFloat(num1);
                parseFloat(num2);
                var result;
                result = func(num1,num2);
                document.getElementById('result').value = result;
                
            }
            
            function add(num1,num2){
                return (num1+num2);
            }
            function sub(num1,num2){
                return (num1-num2);
            }
            function mul(num1,num2){
                return (num1*num2);
            }
            function div(num1,num2){
                return (num1/num2);
            }
            
        </script>
    </head>
    <body>
        <form>
            num1:<input type="text" id="num1" /><br>
            num2:<input type="text" id="num2" /><br>
            <input type="button" id="btnadd" value="add" />
            <input type="button" id="btnsub" value="sub" />
            <input type="button" id="btnmul" value="mul" />
            <input type="button" id="btndiv" value="div" /><br>
            result:<input type="text" id="result"/>
            
        </form>
    </body>
</html>

Upvotes: 0

Views: 63

Answers (2)

ZecKa
ZecKa

Reputation: 2934

Because you didn't define the onclick correctly

Instead of

 btnadd.onclick() = function(){
  cal(add());
}

try

btnadd.onclick = function(){
  cal(add);
}

Check this codepen : https://codepen.io/zecka/pen/NWrejxO

Note that there are other errors in your code that will prevent you from making it work as you want.

Upvotes: 0

user14520680
user14520680

Reputation:

You need to either add the defer attribute to your script or put it at the end of the body. Putting JS code in the head means that it will be run before the page is fully parsed. That means that there is no element with the id of btnadd just yet. If you add the defer attribute, then it will wait for the page to be parsed before running the script. Putting at the end of the body has the same effect. In terms of your code itself, you need to set the onclick property. You cannot assign a function like that. Also, do val2 = parseFloat(val2) rather than parseFloat(val2). (similarly for val1) because here you need to reassign the value

Upvotes: 2

Related Questions