Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help on Javascript Calculator

    Hi all master and expert coders

    I am working on a calculator which using the instructor's codes from the school. The problem that I having right now is the operator. I have successfully complete only the addition, but could not manage on subtraction and the rest operator. I hope experienced codes would help me out on this. Below is my codes.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <script type="text/javascript">
    function calculate() {
    var value1 = parseInt(validate(document.getElementById("value1").value));
    var value2 = parseInt(validate(document.getElementById("value2").value));
    radioButtonCheck();
    checkboxCheck();
    dropDownListCheck();
    document.getElementById("result").value = addition(value1, value2);
    document.getElementById("result").value = subtraction(value1, value2);
    document.getElementById("result").value = multiplication(value1, value2);
    document.getElementById("result").value = division(value1, value2);
    }

    function validate(value) {
    if (value == null || value == "") {
    alert("Required Field");
    return 0;
    } else if (isNaN(value)) {
    alert("Must be a number");
    return 0;
    }
    else return value;
    }

    function addition(value1, value2){
    return value1 + value2;
    }
    // trying to use the same addition return statement but fail.
    function radioButtonCheck() {
    if ((document.getElementById("radio1").checked == false)
    && (document.getElemtById("radio2").checked == false)) {
    alert("Please select a radio button");
    valid = false;
    }
    }
    function checkboxCheck() {
    if ((document.getElementById("cbox1").checked == false)
    && (document.getElementById("cbox2").checked == false)) {
    alert("Please select a checkbox");
    valid = false;
    }
    }
    function dropDownListCheck() {
    if ((document.getElementById("ddlOperator").selectedIndex == 0)) {
    alert("Please select a operator");
    valid = false;
    }
    }

    </script>

    <title>Calculator By Alsus</title>
    </head>
    <body>
    <h2>Calculator</h2>
    <table border = "1">
    <tr>
    <td>Value 1:</td>
    <td><input type="text" id="value1" name="value1" /></td>
    </tr>
    <tr>
    <td>Value 2:</td>
    <td><input type="text" id="value2" name="value2" /></td>
    </tr>
    <tr>
    <td>Operator:</td>
    <td><input type="text" id="Operator" name="Operator" /></td>
    </tr>
    <tr>
    <td><input type="radio" id="radio1" name="radio1" value="radio1" />Radio1<br /></td>
    <td><input type="radio" id="radio2" name="radio2" value="radio2" />Radio2<br /></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="cbox1" name="cbox1" value="cbox1" />Checkbox 1<br /></td>
    <td><input type="checkbox" id="cbox2" name="cbox2" value="cbox2" />Checkbox 2<br /></td>
    </tr>
    <tr>
    <td>
    <select id="ddlSelect">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
    </select>
    </td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Result:</td>
    <td><input type="text" id="result" name="result" /></td>
    </tr>
    </table>
    <input type="submit" id="btn_sub" name="btn_sub" value="Submit" onclick="calculate()" />
    <input type="reset" id="btn_res" name="btn_res" value="Reset" />
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I don't understand what the radio buttons and checkboxes are supposed to do. In any case you simply test whether or not one of them has been selected, and do not capture the value. Same with the select list. You should include an initial option "Choose an operator" and then capture the selected value onchange.

    valid = false does nothing as it is not referenced anywhere else.

    To validate the inputs use var val1 = Number(document.getElementById("value1").value) || 0;
    That is, if the entry returns NaN change it to the number 0.

    Avoid using the same name (value1) for an HTML form element and a Javascript variable. It is very dangerous!

    Typos such as getElemtById will cause your script to fail.

    You are not submitting a form so your submit button should be a plain button.

    Surely what you are trying to do is simply evaluate value1 operator (+-*/) value2 where the operator is the chosen value of the select list. It does not need a separate function for each operator. Be careful not to divide by zero!

    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    "Kuku-kuku kaki kakak kakak-ku kaku-kaku" is Indonesian for "My grandfather's older brother's toenails are stiff". - Website "Living In Indoneasia"
    Last edited by Philip M; 01-22-2012 at 05:58 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •