如何从输入框中更改方程式的文本？

Question

How can I change the values for a,b,c in the equation when the users enter input digits from the text-box?当用户从文本框中输入输入数字时，如何更改方程中 a、b、c 的值？ Also, after that, is it possible to directly copy the equation to the function to plot box for the graphing part so that user don't have to type the whole equation into the text-box in order to graph a quadratic equation?另外，在那之后，是否可以直接将方程复制到函数以绘制图形部分的绘图框，这样用户就不必为了绘制二次方程而将整个方程输入到文本框中？

 var parameters = { target: '#myFunction', data: [{ fn: 'sin(x)', color: 'red' }], grid: true, yAxis: {domain: [-1, 1]}, xAxis: {domain: [0, 2*Math.PI]} }; function plot() { var f = document.querySelector("#function").value; var xMin = document.querySelector("#xMin").value; var xMax = document.querySelector("#xMax").value; var yMin = document.querySelector("#yMin").value; var yMax = document.querySelector("#yMax").value; var color = document.querySelector("#color").value; parameters.data[0].fn = f; parameters.xAxis.domain = [xMin, xMax]; parameters.yAxis.domain = [yMin, yMax]; parameters.data[0].color = color; functionPlot(parameters); }

 body { font-family: 'Raleway', sans-serif; background-color: white; text-align: center; } h2{ text-align: center; } .layer{ width: 70%; margin-right: auto; margin-left: auto; } section { border:4px solid grey; border-radius:15px; box-shadow: 5px 5px 5px grey; float:left; height:360px; padding: 20px; margin:10px; } #plotSettings { width:160px; } #plot { width:550px; } #extra{ }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quadratic calculator</title> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script> </head> <body> <div class="container"> <div class="display"> <var class="displayLetters" id="displayA">a</var>x<sup>2</sup> + <var id="displayB" class="displayLetters">b</var>x + <var class="displayLetters" id="displayC">c</var> </p> </div> <div class="inputBtns"> <p>A: <input oninput="updateText('inputA','displayA','a')" class="numberInputs" type="number" id="inputA"><br><br></p> <p>B: <input oninput="updateText('inputB','displayB','b')" class="numberInputs" type="number" id="inputB"><br><br></p> <p>C: <input oninput="updateText('inputC','displayC','c')" class="numberInputs" type="number" id="inputC"><br></p> </div> </div> <body onload="plot();"> <div class="layer"> <section id="plotSettings"> <label for="xMin">xMin: </label> value: <input type=number id="xMin" value=-5 step=5 oninput="plot();"> <p></p> <label for="xMin">xMax: </label> value: <input type=number id="xMax" value=5 step=5 oninput="plot();"> <p></p> <label for="yMin">yMin: </label> value: <input type=number id="yMin" value=-5 step=5 oninput="plot();"> <p></p> <label for="yMax">yMax: </label> value: <input type=number id="yMax" value=5 step=5 oninput="plot();"> <p></p> <label for="color">Color: </label> value: <input type=color id="color" onchange="plot();"> <p></p> <label for="function">Function to plot: </label> <input id="function" type="text" value="sin(x)" onchange="plot();"> <p></p> <button onclick="plot();">GRAPH!</button> </div> </section> <section id="plot"> <div id="myFunction"></div> </section> </body> </html>

Answer 1

First of all, HTML has only one body tag and you have used two body tags.首先，HTML 只有一个 body 标签，而您使用了两个 body 标签。

After that do this-之后做这个——

<var class="displayLetters" id="displayA">a</var>x<sup>2</sup> + <var id="displayB" class="displayLetters">b</var>x + 
<var class="displayLetters" id="displayC">c</var>
    <p>A: <input   class="numberInputs" type="number" id="inputA" ><br><br></p>
        <p>B:   <input  class="numberInputs" type="number" id="inputB"><br><br></p>
        <p>C:   <input   class="numberInputs" type="number" id="inputC"><br></p>

in JS在JS中

     $("#inputA").blur(function a(){
 var e=$("#inputA").val();

$("#displayA").html(e);
 });

     $("#inputB").blur(function a(){
 var e=$("#inputB").val();

$("#displayB").html(e);
 });


 $("#inputC").blur(function a(){
 var e=$("#inputC").val();

$("#displayC").html(e);
 });

Check here在这里查看

如何从输入框中更改方程式的文本？

问题描述

1 个解决方案

解决方案1
1 2019-01-03 06:03:36

如何从输入框中更改方程式的文本？

问题描述

1 个解决方案

解决方案1 1 2019-01-03 06:03:36

解决方案1
1 2019-01-03 06:03:36