#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Location
    Nigeria
    Posts
    2
    Rep Power
    0

    JavaScript Function call not working


    I am a JavaScript beginner. I am trying to build a simple Calculator using Java|Script and HTML. I have called the JavaScript functions using the onclick event of the buttons but when I view the page on the browser the functions are not executed.The HTML is as shown below
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="Calc.js"></script>
    </head>
    <body>
    <form name="form" >

    <label>Number 1:</label>
    <input id="num1" type="text" name="num1"/><br/>
    <label>Number 2:</label>
    <input id="num2" type="text" name="num2" />
    <br/>
    <input id="Add" type="button" value="Add" onclick="Add()" />&nbsp;<input id="Divide" type="button" value="Divide" onclick="Divide()"/>
    <input id="Multiply" type="button" value="Multiply" onclick="Multiply()"/>


    </form>
    <div id="showplace" style="background-color:cornsilk; font-family:Georgia; font-weight:500; color:#74d268;"></div>

    </body>
    </html>


    The JavaScript is shown below:
    function Add(){
    var a= document.getElementById("num1").value
    var b= document.getElementById("num2").value;
    var val=Number(a) + Number(b);
    document.getElementById("showplace").innerHTML = 'Addition: ' + val;
    }
    function Divide() {
    var a= document.getElementById("num1").value
    var b= document.getElementById("num2").value;
    var val=Number(a)/Number(b);
    document.getElementById("showplace").innerHTML = 'Division: ' + val;
    }
    function Multiply(){
    var a= document.getElementById("num1").value
    var b= document.getElementById("num2").value;
    var val=Number(a)*Number(b);
    document.getElementById("showplace").innerHTML = 'Multiplication: ' + val;
    }
    function Subtract(){
    var a= document.getElementById("num1").value
    var b= document.getElementById("num2").value;
    var val=Number(a)-Number(b);
    document.getElementById("showplace").innerHTML = 'Subtraction: ' + val;
    }
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,117
    Rep Power
    119
    I am not quit sure why, but by changing your button input ids first letter from upper case to lower case; your code works (that... and adding in a few semi-colons, you were missing). I really don't get that; I know that your not supposed to start an id attribute with a number, but according to other html specs I have read in the past; you can start it with an roman letters (a-z,A-Z)... so that includes upper case letters... clueless on this one. Here is how I edited your code and it seems to work now:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script>
    function Add(){
    var a= document.getElementById("num1").value
    var b= document.getElementById("num2").value;
    var val=Number(a) + Number(b);
    document.getElementById("showplace").innerHTML = 'Addition: ' + val;
    }
    function Divide() {
    var a= document.getElementById("num1").value;
    var b= document.getElementById("num2").value;
    var val=Number(a)/Number(b);
    document.getElementById("showplace").innerHTML = 'Division: ' + val;
    }
    function Multiply(){
    var a= document.getElementById("num1").value;
    var b= document.getElementById("num2").value;
    var val=Number(a)*Number(b);
    document.getElementById("showplace").innerHTML = 'Multiplication: ' + val;
    }
    function Subtract(){
    var a= document.getElementById("num1").value;
    var b= document.getElementById("num2").value;
    var val=Number(a)-Number(b);
    document.getElementById("showplace").innerHTML = 'Subtraction: ' + val;
    }
    </script>
    </head>
    <body>
    <form name="form" >
    
    <label>Number 1:</label>
    <input id="num1" type="text" name="num1"/><br/>
    <label>Number 2:</label>
    <input id="num2" type="text" name="num2" />
    <br/>
    <br/>
    <input id="add" type="button" value="Add" onclick="Add()" />&nbsp;<input id="divide" type="button" value="Divide" onclick="Divide()"/>
    <input id="multiply" type="button" value="Multiply" onclick="Multiply()"/>
    
    
    </form>
    <div id="showplace" style="background-color:cornsilk; font-family:Georgia; font-weight:500; color:#74d268;"></div>
    
    </body>
    </html>
    Also, here is a link, with specs, about the id attribute:
    http://dev.w3.org/html5/markup/datat...common.data.id
    http://reference.sitepoint.com/html/core-attributes/id
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Location
    Nigeria
    Posts
    2
    Rep Power
    0

    Thanks a lot @web_loone08


    I have made the changes and it's working now. Am grateful.

IMN logo majestic logo threadwatch logo seochat tools logo