텍스트 상자의 기능을 변경하면 그래프가 변경되지 않습니다

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

이것은 jsfiddle 특정 문제입니다. 기능 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 대신 자바 스크립트 구문의 일반적인 수학 구문의 입력을 할 수 있습니다 그 자체 파서 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 코드를 입력으로 제공 할 수있는 경우 가능합니다.