CODEWITHSUNDEEP
jquery
Vishnu Sharma
Vishnu Sharma

Reputation: 61

Jquery :: Addition of 2 numbers

I have an exercise to perform addition of two numbers using JQuery. 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):

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<input id="num1" placeholder="0">
<input  id="num2" placeholder="0"></br>
<button id="add" type="button" onclick="add()" >Add</button></br>
<input id="total" placeholder="0" readonly>

</body>
</html>

JS file that i can modify.I cannot remove the add function:

  function add() {
    $(document).ready(function(){
        var a = parseInt($("#num1").val());
        var b = parseInt($("#num2").val());
        var c = a + b;
        $("#total").val(c);
    });
    };

When i run the test, its validating against below test cases :

    describe('Demo', function() {
    beforeEach(function() {
    document.body.innerHTML='<input id="num1" placeholder="0"><input  id="num2" placeholder="0"></br><button id="add" type="button">Add</button></br><input id="total" placeholder="0" readonly>';
    });
    afterEach(function() {
       //document.body.removeChild(document.getElementById('app'));
    });
 describe('Testing function call', function() {
    var spyEvent;
   it ("Testing function call", function() {
    spyEvent = spyOnEvent('#add', 'click');
    $('#add').trigger( "click" );

    expect('click').toHaveBeenTriggeredOn('#add');
    expect(spyEvent).toHaveBeenTriggered();
  });
  });
});
describe("testing addition", function() {
  beforeEach(function() {
   document.body.innerHTML='<div id="app"><input id="num1"><input  id="num2"></br><button id="add" type="button" onclick="add()">Add</button></br><input id="total" placeholder="0" readonly></div>';

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

  it ("testing addition", function() {
    $("#num1").val(100);
      $("#num2").val(200);
      $('#add').trigger( "click" );
    expect($('#total')).toHaveValue('300')
  });
it ("testing addition not a number", function() {
    $("#num1").val(100);
      $("#num2").val("a");
      $('#add').trigger( "click" );
    expect($('#total')).toHaveValue('NaN')
  });
it ("testing addition negative number", function() {
    $("#num1").val(-100);
      $("#num2").val(567);
      $('#add').trigger( "click" );
    expect($('#total')).toHaveValue('467')
  });
it ("testing addition floating point number", function() {
    $("#num1").val(2.9);
      $("#num2").val(3.7);
      $('#add').trigger( "click" );
    expect($('#total')).toHaveValue('5')
  });

});

Error that i am getting is:

Node.js (linux; U; rv:v8.9.4) testing addition testing addition FAILED                                                                 
        Expected r({ 0: HTMLNode, length: 1 }) to have value '300'.                                                                    
            at UserContext.<anonymous> (test/index_test.js:42:25)                                                                      
Node.js (linux; U; rv:v8.9.4) testing addition testing addition not a number FAILED                                                    
        Expected r({ 0: HTMLNode, length: 1 }) to have value 'NaN'.                                                                    
            at UserContext.<anonymous> (test/index_test.js:48:25)                                                                      
Node.js (linux; U; rv:v8.9.4) testing addition testing addition negative number FAILED                                                 
        Expected r({ 0: HTMLNode, length: 1 }) to have value '467'.                                                                    
            at UserContext.<anonymous> (test/index_test.js:55:25)                                                                      
Node.js (linux; U; rv:v8.9.4) testing addition testing addition floating point number FAILED                                           
        Expected r({ 0: HTMLNode, length: 1 }) to have value '5'.                                                                      
            at UserContext.<anonymous> (test/index_test.js:62:25)                                                                      
Node.js (linux; U; rv:v8.9.4): Executed 5 of 5 (4 FAILED) (0.064 secs / 0.055 secs)

Upvotes: 0

Views: 8521

Answers (1)

Mounica TimmiReddy
Mounica TimmiReddy

Reputation: 11

Your js code need not have document.ready() function . Try without it , it will work.

function add() {
       var a = parseInt($("#num1").val());
       var b = parseInt($("#num2").val());
       var c = a + b;
       $("#total").val(c);
   };

Upvotes: 1

Related Questions