如何在程序中使用eval

问题描述 投票:0回答:1

我正在开发一个JavaScript程序-图形计算器。用户在文本字段中输入一个方程式(如x * x + 2 * x),然后按“获取答案”按钮,并应得到一个图形。如果我在函数f(x)中编写一个表达式,例如“ Math.sin(x)”,则效果很好,但是当我尝试使用eval方法评估用户代码时,该程序将停止工作。我是javascript新手。任何帮助,将不胜感激!JavaScript代码

//vars
var points = "";
var input = document.querySelector("#input");
var evaluate = document.querySelector("#evaluate");

evaluate.addEventListener('click', function() {
  document.body.appendChild(makeSVG(svgData));
});

function f(x) {
  return eval('(function() { x=' + x + ';' + input.value + ';}())');
}

function getPoints() {
  for (var i = -10; i < 10.0; i += 0.25) {
    var x = 10 * i + 100;
    var y = -10 * f(i) + 100;
    points += "" + x + "," + y + " ";
  }
  return points;
}

var svgData = [{
    type: 'svg',
    data: {
      viewBox: "0 0 500 200"
    }
  },
  {
    type: 'polyline',
    data: {
      fill: "none",
      stroke: "black",
      strokeWidth: "1",
      points: getPoints()
    }
  },
];

function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v) {
    n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) {
      return "-" + m.toLowerCase();
    }), v[p]);
  }
  return n
}

function makeSVG(data) {
  var result;
  data.forEach(
    function(elem, index, array) {
      if (index)
        result.appendChild(getNode(elem.type, elem.data));
      else
        result = getNode(elem.type, elem.data);
    }
  );
  return result;
}
<!DOCTYPE html>

<html>

<head>
  <title>Graphing Calculator</title>
</head>

<body>
  <h1>Graphing Calculator</h1>
  <form>
    <input id="input" type="text">
    <button id="evaluate" type="button">Get answer</button>
  </form>
  <script type="text/javascript" src="code.js"></script>
</body>

</html>
javascript html eval
1个回答
0
投票

首先,请注意eval始终应谨慎使用,因为它允许从用户输入中执行任意代码。对于您而言,这实际上并没有什么危害,因为它只允许用户在自己的页面上执行代码。

您的f()函数不返回任何内容,并且eval包含不必要的自执行函数。试试这个:

function f(x) {
  return eval(input.value);
}
© www.soinside.com 2019 - 2024. All rights reserved.