CODEWITHSUNDEEP
javascript
Vishnu Sharma
Vishnu Sharma

Reputation: 61

Javascript Fundamentals : Simple Calculator Error

I have an exercise to perform Simple Calculation using Javascript. The code works fine in Visual Studio but not in the Hackerrank test site that i have to do the exercise in.

HTML Code: (Given already, cannot modify) :

<HEAD>
    <TITLE> Simple Calculation</TITLE>

</HEAD>

<BODY>
    <FORM NAME="myForm">
        <TABLE BORDER=2>
            <TR>
                <TD align="center">
                    <INPUT TYPE="text" ID="screen" NAME="screen" style="width:99%"><br>
                </TD>
            </TR>
            <TR>
                <TD>
                    <INPUT TYPE="button" NAME="7" VALUE="  7  " onclick="update(7)">
                    <INPUT TYPE="button" NAME="8" VALUE="  8  " onclick="update(8)">
                    <INPUT TYPE="button" NAME="9" VALUE="  9  " onclick="update(9)">
                    <INPUT TYPE="button" NAME="+" VALUE="  +  " onclick="update('+')">
                    <br>
                    <INPUT TYPE="button" NAME="4" VALUE="  4  " onclick="update(4)">
                    <INPUT TYPE="button" NAME="5" VALUE="  5  " onclick="update(5)">
                    <INPUT TYPE="button" NAME="6" VALUE="  6  " onclick="update(6)">
                    <INPUT TYPE="button" NAME="-" VALUE="  -  " onclick="update('-')">
                    <br>
                    <INPUT TYPE="button" NAME="1" VALUE="  1  " onclick="update(1)">
                    <INPUT TYPE="button" NAME="2" VALUE="  2  " onclick="update(2)">
                    <INPUT TYPE="button" NAME="3" VALUE="  3  " onclick="update(3)">
                    <INPUT TYPE="button" NAME="*" VALUE="  x  " onclick="update('*')">
                    <br>
                    <INPUT TYPE="button" NAME="c" VALUE="  c  " onclick="form_reset();">
                    <INPUT TYPE="button" NAME="0" VALUE="  0  " onclick="update(0)">
                    <INPUT TYPE="button" NAME="=" VALUE="  =  " onclick="result();">
                    <INPUT TYPE="button" NAME="/" VALUE="  /  " onclick="update('/')">
                </TD>
            </TR>
        </TABLE>
    </FORM>
    <script type="text/javascript" src="index.js"></SCRIPT>
</BODY>
</HTML>

JS file that i can modify.I cannot remove the various functions or add a new one

var text = "";
function update(value) {
    //Type the code here.
    text+= value;
    document.getElementById('screen').value = value;
}

function result() {
    //Type the code here.
    document.getElementById('screen').value = eval(text);
}

function form_reset() {
    //Type the code here.
    document.getElementById('screen').value ="";
    text = "";
}

When i run the test, its validating against below test cases. It's failing in the function result(); while adding 7 and 8

describe('Calc Handson', function() {
    beforeEach(function() {
    document.body.innerHTML='<TABLE BORDER=2 id="app"><TR><TD align="center"><INPUT TYPE="text" ID="screen" NAME="screen" style="width:99%"><br>   </TD> </TR> <TR><TD> <INPUT TYPE="button" NAME="7" VALUE="  7  " onclick="update(7)">  <INPUT TYPE="button" NAME="8" VALUE="  8  " onclick="update(8)"><INPUT TYPE="button" NAME="9"VALUE="  9  " onclick="update(9)"><INPUT TYPE="button" NAME="+" VALUE="  +  " onclick="update("+")"><br><INPUT TYPE="button" NAME="4" VALUE="  4  " onclick="update(4)">  <INPUTTYPE="button" NAME="5" VALUE="  5  " onclick="update(5)"><INPUT TYPE="button" NAME="6" VALUE="  6  " onclick="updat(6)"> <INPUT TYPE="button" NAME="-" VALUE="  -  " onclick="update("-")"><br><INPUTTYPE="button" NAME="1" VALUE="  1  " onclick="update(1)"> <INPUT TYPE="button" NAME="2" VALUE="  2  " onclick="update(2)"><INPUT TYPE="button" NAME="3" VALUE="  3  " onclick="update(3)"> <INPUT TYPE="button" NAME="*"VALUE="  x  " onclick="update("*")"><br> <INPUT TYPE="button" NAME="c" VALUE="  c  "onclick="form_reset();">   <INPUT TYPE="button" NAME="0" VALUE="  0  " onclick="update(0)">  <INPUT TYPE="button" NAME="=" VALUE="  =  " onclick="result();"><INPUT TYPE="button" NAME="/" VALUE="  /  " onclick="update("/")">             </TD></TR> </TABLE>';

    });

    afterEach(function() {
        document.body.removeChild(document.getElementById('app'));
    });

    describe('Calc ', function() {
         it('update function should exist', function() {
            update(1);
        expect(document.getElementById("screen").value).toBe('1');

        });
it('update function should exist', function() {
            update(2);
        expect(document.getElementById("screen").value).toBe('2');

        });
it('update function should exist', function() {
            update(3);
        expect(document.getElementById("screen").value).toBe('3');

        });
it('update function should exist', function() {
            update(4);
        expect(document.getElementById("screen").value).toBe('4');

        });
it('update function should exist', function() {
            update(5);
        expect(document.getElementById("screen").value).toBe('5');

        });
it('update function should exist', function() {
            update(6);
        expect(document.getElementById("screen").value).toBe('6');

        });
it('update function should exist', function() {
            update(7);
        expect(document.getElementById("screen").value).toBe('7');

        });
it('update function should exist', function() {
            update(8);
        expect(document.getElementById("screen").value).toBe('8');

        });
it('update function should exist', function() {
            update(9);
        expect(document.getElementById("screen").value).toBe('9');

        });
it('update function should exist', function() {
            update(0);
        expect(document.getElementById("screen").value).toBe('0');

        });

it('update function should exist', function() {
            update('*');
        expect(document.getElementById("screen").value).toBe('*');

        });
it('update function should exist', function() {
            update('+');
        expect(document.getElementById("screen").value).toBe('+');

        });

it('update function should exist', function() {
            update('-');
        expect(document.getElementById("screen").value).toBe('-');

        });
it('update function should exist', function() {
            update('/');
        expect(document.getElementById("screen").value).toBe('/');

        });
it('result function should exist', function() {
            update(7);
        update('+');
        update(8);
        result();
        expect(document.getElementById("screen").value).toBe('15');

        });
it('form_reset function should exist', function() {
            update(7);
        form_reset();
        expect(document.getElementById("screen").value).toBe('');
    });
    });
});

Error that i am getting is :

Node.js (linux; U; rv:v8.9.4) Calc Handson Calc  result function should exist FAILED                                                   
        SyntaxError: Invalid regular expression: missing /                                                                             
            at result (app/index.js:10:52)                                                                                             
            at UserContext.<anonymous> (test/index_test.js:88:6)                                                                       
Node.js (linux; U; rv:v8.9.4): Executed 16 of 16 (1 FAILED) (0.175 secs / 0.178 secs)

Kindly help.

Upvotes: 3

Views: 16137

Answers (1)

trincot
trincot

Reputation: 349946

The problem is that your variable text is not reset between the different tests of the test suite. The test suite only resets the HTML, not the global variables you might have used. Although your idea to store the expression in a variable is great, you need a way that does not depend on global variables.

So, the idea could be to just store the expression in the screen element (not just the last digit that was entered)

This is what that comes down to:

function update(value) {
    document.getElementById('screen').value += value;
}

function result() {
    document.getElementById('screen').value = eval(document.getElementById('screen').value);
}

function form_reset() {
    document.getElementById('screen').value = "";
}

Upvotes: 7

Related Questions