Question

当用户从文本框中输入输入数字时，如何更改方程式中a，b，c的值？而且，在那之后，是否可以直接将方程式复制到函数中用于绘图的绘图框，以使用户不必在文本框中键入整个方程式即可绘制二次方程式？

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

首先，HTML仅具有一个body标签，而您使用了两个body标签。

然后执行此操作

<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>

在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);
 });

选中here

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

1 个答案: