テキストボックス内の関数を変更してもグラフが変更されない

Question

グラフを変更してグラフの下に表示されるテキストを入力できるフィドルを作成しようとしています。私はそのためにjsxgraphライブラリを使用しています。上記

http://jsxgraph.uni-bayreuth.de/wiki/index.php/Change_Equation_of_a_Graph#JavaScript_Part

あなたはグラフも変化示すテキストで機能を変更したときに作業している例です。

同じ例私はフィドルで試しています。しかし、それは動作していません。

https://jsfiddle.net/me55dw4h/30/

初期コード：

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true}); 
eval("function f(x){ return "+document.getElementById("eingabe").value+";}"); 
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]); 

どのように私はそれを動作させるのですか？

Answer 1

これは現象に固有の問題です。関数doItの宣言は

doIt = function(){ 
    //redefine function f according to the current text field value 
    eval("function f(x){ return "+document.getElementById("eingabe").value+";}"); 
    //change the Y attribute of the graph to the new function 
    graph.Y = function(x){ return f(x); }; 
    //update the graph 
    graph.updateCurve(); 
    //update the whole board 
    board.update(); 
}; 

代わりに

function doIt() { 
    ... 
} 

に変更された場合、その後の例では、実行されます。

しかし、私はその間JSXGraphが共通の数学の構文の代わりに、JavaScriptの構文の入力を可能にする、それ自身のパーサJessieCode（https://github.com/jsxgraph/JessieCodeを参照）、付属していますことを強調しましょう。つまり、Math.sin(x)の代わりに、ユーザはsin(x)を入力するだけでよい。さらに、電力オペレータ^があります。Math.pow(x,2)の代わりに、x^2と入力することができます。関数プロットのためJessieCodeを使用して

最小限の例では、次のようになり、https://jsfiddle.net/eLs83cs6/

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true}); 

doPlot = function() { 
    var txtraw = document.getElementById('input').value, // Read user input 
     f = board.jc.snippet(txtraw, true, 'x', true), // Parse input with JessieCode 
     curve; 

    board.removeObject('f'); // Remove element with name f 
    curve = board.create('functiongraph', [f, -10, 10], {name:'f'}); 
}; 

doPlot(); 

アン・追加の副作用がJessieCodeと数学の構文の解析が簡単になりXSS攻撃を防ぐことにある参照ユーザが入力として任意のJavaScriptコードを提供できる場合に可能です。