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.

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.

Share Improve this question edited Nov 17, 2018 at 17:30 asked Nov 17, 2018 at 16:59 Vishnu Sharma 611 gold badge3 silver badges7 bronze badges

1 document.getElementById('screen').value = eval(text); You sure what you are doing here? – Praveen Kumar Purushothaman Commented Nov 17, 2018 at 17:00
1 Check the value of text, it more than likely is containing all the text from previous tests since it is never cleared. Eg it is probably ending up like eval("1234567890*+-/7+8") which gives the same error you are getting – Patrick Evans Commented Nov 17, 2018 at 17:04
1 Yes, the code works fine in Visual Studio. – Vishnu Sharma Commented Nov 17, 2018 at 17:04
1 HackerRank is probably entering invalid expressions that you didn't try in Visual Studio. You need to add error checking in result(). – Barmar Commented Nov 17, 2018 at 17:15
1 Using eval is a pretty bad idea in any case. I'd go after creating a stack of entries and then case logic to determine the results rather than eval a string in any case. – Paul Commented Nov 17, 2018 at 17:26

| Show 4 more ments

1 Answer 1

Sorted by: Reset to default 7

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 es 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 = "";
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript Fundamentals : Simple Calculator Error - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)