How to use eval in the program
Question
I am developing a javascript program -- graphing calculator. User inputs an equation (like x*x+2*x ) into text field, presses "get answer" button and should get a graph. If I write in function f(x) an expression, like "Math.sin(x)" it works great, but when I try to use eval method to evaluate the users code, the program stops working. I'm new to javascript. Any help would be appreciated! JavaScript code
//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(/[AZ]/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>
2 answers
solution1
2 ACCPTED 2020-01-13 23:12:53
There's no need for the IIFE in f() . Just call eval(x) . It will execute in the scope of f() , so it can access x .
Another problem is that you're calling getPoints() when you initialize svgData , but the user hasn't yet filled in the input field. You need to do that in the click handler.
//vars var points = ""; var input = document.querySelector("#input"); var evaluate = document.querySelector("#evaluate"); evaluate.addEventListener('click', function() { svgData[1].data.points = getPoints(); document.body.appendChild(makeSVG(svgData)); }); function f(x) { return eval(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: null } }, ]; function getNode(n, v) { n = document.createElementNS("http://www.w3.org/2000/svg", n); for (var p in v) { n.setAttributeNS(null, p.replace(/[AZ]/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>
solution2
1 2020-01-13 23:09:15
First, note that eval should always be used carefully as it allows arbitrary code execution from users input. In your case it can't really be harmful because it only allows a user to execute code on his own page.
Your f() function contains an eval which contains a needless self-executing function. Moreover, this self-executing function doesn't return anything. Try this instead:
function f(x) {
return eval(input.value);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.