eval() method, with a variable in jQuery syntax, is not working

Question

I am trying to run a calculator with smallest possible JavaScript code bits. I am using jQuery to further minimize my script section. But my eval() method is not working though alert(executed) present just next to it is working fine! What wrong am I doing? Take a look at what I've tried so far!

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta charset="UTF-8" />
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
  <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
  <style>
    .inp {
      font-weight: bolder;
      font-size: 5vw;
      width: 13vw;
      height: 13vw;
      margin-bottom: 2vw;
      margin-top: 2vw;
    }
    
    input:hover {
      color: red;
    }
  </style>
</head>

<body>
  <p>
    Answer will be shown here:
  </p>
  <br></br><br></br>
  <table style="background:black; padding:2vw; width:60vw; margin-left:20vw;">
    <th>
      <div id="display" style="width:56vw; height:15vw; background:skyblue; font-weight:bolder; font-size:5vw; color:red;"></div>
    </th>
    <tr>
      <td>
        <input class="inp" type="button" value="1" />
        <input class="inp" type="button" value="2" />
        <input class="inp" type="button" value="3" />
        <input class="inp" type="button" value="+" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="inp" type="button" value="4" />
        <input class="inp" type="button" value="5" />
        <input class="inp" type="button" value="6" />
        <input class="inp" type="button" value="-" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="inp" type="button" value="7" />
        <input class="inp" type="button" value="8" />
        <input class="inp" type="button" value="9" />
        <input class="inp" type="button" value="*" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="inp" type="button" value="." />
        <input class="inp" type="button" value="0" />
        <input class="inp" type="button" value="/" />
        <input class="inp" type="button" value="ans" />
      </td>
    </tr>
  </table>
  <script>
    $(function() {
      $("input.inp").on("click", function() {
        if ($(this).val() != "ans") {
          var solve = $("#display").append($(this).val());
        }
        if ($(this).val() == "ans") {
          var result = eval(solve);
          $("p").html(eval(result));
          alert("executed");
        }
      });
    });
  </script>
</body>

</html>

Edit: There were some syntax error in this code, which I hope is now fixed.

solv is a number (actually, technically NaN, which is Not a Number) — Heretic Monkey
– Heretic Monkey, Commented Jun 18, 2020 at 14:18
$("#display").append() returns $("#display") so will not be a number for parseInt to parse - your parseInt should be around solv.val() — fdomn-m
– fdomn-m, Commented Jun 18, 2020 at 14:24
Just click on the "Run code snippet" button and observe to see if the errors are fixed. You can also click on the "Run" button in the snippet editor. — Heretic Monkey
– Heretic Monkey, Commented Jun 18, 2020 at 14:26
javascript functions should really only be using id's from HTML and css should use classes only for styling. Look at using Divs too instead of tables :) Good luck. — OrangeSubmarine121
– OrangeSubmarine121, Commented Jun 18, 2020 at 14:30

Swati · Accepted Answer · 2020-06-18 14:27:01Z

You need to get value of your #display and then pass the same to your eval function to get required answer.

Demo Code :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta charset="UTF-8" />
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
  <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
  <style>
    .inp {
      font-weight: bolder;
      font-size: 5vw;
      width: 13vw;
      height: 13vw;
      margin-bottom: 2vw;
      margin-top: 2vw;
    }
    
    input:hover {
      color: red;
    }
  </style>

  <p>
    Answer will be shown here: <span></span>
  </p>
  <br></br><br></br>
  <table style="background:black; padding:2vw; wclassth:60vw; margin-left:20vw;">
    <th>
      <div id="display" style="wclassth:56vw; height:15vw; background:skyblue; font-weight:bolder; font-size:5vw; color:red;"></div>
    </th>
    <tr>
      <td>
        <input class="inp" type="button" value="1" />
        <input class="inp" type="button" value="2" />
        <input class="inp" type="button" value="3" />
        <input class="inp" type="button" value="+" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="inp" type="button" value="4" />
        <input class="inp" type="button" value="5" />
        <input class="inp" type="button" value="6" />
        <input class="inp" type="button" value="-" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="inp" type="button" value="7" />
        <input class="inp" type="button" value="8" />
        <input class="inp" type="button" value="9" />
        <input class="inp" type="button" value="*" />
      </td>
    </tr>
    <tr>
      <td>
        <input class="inp" type="button" value="." />
        <input class="inp" type="button" value="0" />
        <input class="inp" type="button" value="/" />
        <input class="inp" type="button" value="ans" />
      </td>
    </tr>
  </table>
  <script>
    $(function() {
      $("input.inp").on("click", function() {

        if ($(this).val() != "ans") {
     $("#display").append($(this).val());//append new value
         
        }
        if ($(this).val() == "ans") {
       var solve = $("#display").text();//get value from display
          var result = eval(solve);//eval
          console.log(result)
          $("span").html(result);
          alert("executed");
        }
      });
    });
  </script>

Dear Swati , thanks a lot, now I know what was wrong with my idea!

ROOT · Accepted Answer · 2020-06-18 14:53:49Z

The parseInt() line parseInt($("#display").append($(this).val()); will not return what you think it will return, parseInt() will try to parse the result of .append() which is not a numeric value, this is how I think you can implement it:

Also a security note, please try to avoid using eval(), please check this: Never use eval

$(function () {
  $("input.inp").on("click", function () {
    let solv = $(this).val();
    if (solv != "ans") {    
      $("#display").append(solv);
    }

    if (solv == "ans") {
      let solve = $("#display").text();
      const result = calculateResult(solve);
      $("#ans").html(result);
    }
  });
});

function calculateResult(js) {
  return Function('"use strict";return (' + js + ")")();
}

.inp {
  font-weight: bolder;
  font-size: 5vw;
  width: 13vw;
  height: 13vw;
  margin-bottom: 2vw;
  margin-top: 2vw;
}
input:hover {
  color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
        <meta charset="UTF-8" />
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
        <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0" />
    </head>
    <body>
        <p>
            Answer will be shown here: <span id='ans'></span>
        </p>
        <table style="background: black; padding: 2vw; wclassth: 60vw; margin-left: 20vw;">
            <th><div id="display" style="wclassth: 56vw; height: 15vw; background: skyblue; font-weight: bolder; font-size: 5vw; color: red;"></div></th>
            <tr>
                <td>
                    <input class="inp" type="button" value="1" />
                    <input class="inp" type="button" value="2" />
                    <input class="inp" type="button" value="3" />
                    <input class="inp" type="button" value="+" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="inp" type="button" value="4" />
                    <input class="inp" type="button" value="5" />
                    <input class="inp" type="button" value="6" />
                    <input class="inp" type="button" value="-" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="inp" type="button" value="7" />
                    <input class="inp" type="button" value="8" />
                    <input class="inp" type="button" value="9" />
                    <input class="inp" type="button" value="*" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="inp" type="button" value="." />
                    <input class="inp" type="button" value="0" />
                    <input class="inp" type="button" value="/" />
                    <input class="inp" type="button" value="ans" />
                </td>
            </tr>
        </table>
    </body>
</html>

Your answer is detailed and spot on, thanks a lot for your help and making me realise my mistakes!

Collectives™ on Stack Overflow

eval() method, with a variable in jQuery syntax, is not working

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related