我正在开发一个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>
首先,请注意eval
始终应谨慎使用,因为它允许从用户输入中执行任意代码。对于您而言,这实际上并没有什么危害,因为它只允许用户在自己的页面上执行代码。
您的f()
函数不返回任何内容,并且eval
包含不必要的自执行函数。试试这个:
function f(x) {
return eval(input.value);
}