时间戳

首页 > 解决方案 > 带有 jQ​​uery 语法变量的 eval() 方法不起作用

javascript - 带有 jQ​​uery 语法变量的 eval() 方法不起作用

问题描述

我正在尝试使用尽可能少的 JavaScript 代码位运行计算器。我正在使用 jQuery 进一步最小化我的脚本部分。但是我的eval()方法不起作用，尽管alert(executed)它旁边的工作正常！我在做什么错？看看我到目前为止所做的尝试！

<!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>

编辑：此代码中有一些语法错误，我希望现在已修复。

标签： javascriptjqueryeval

解决方案

您需要获取您的价值，#display然后将其传递给您的eval函数以获得所需的答案。

演示代码：

<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>

推荐阅读