我正在编写一个简单的网页,该网页将对基本基本功能(sin,cos,exp..etc)进行数值积分。该网页至少应包含矩形规则,中点规则和梯形规则。
到目前为止,我编写的代码一直工作到矩形规则为止,但是,当我执行命令以运行中点规则的代码时,在我认为应该获得输出的地方没有输出。
我怀疑这可能是由于我不太了解html和js之间的亲密关系。
function getFunction(str, x) {
nameObj = {
"sin": 0,
"cos": 1,
"exp": 2
};
var fAtx = [Math.sin(x), Math.cos(x), Math.exp(x)];
return fAtx[nameObj[str]];
}
//rectangle rule
function rectangle_rule() {
var limit_a = document.getElementById("a_rect").value;
var limit_b = document.getElementById("b_rect").value;
var limit_diff = limit_b - limit_a;
var functionInput = document.getElementById("funcRectangle").value;
var rect_rule = limit_diff * getFunction(functionInput, limit_a);
document.getElementById("answerRectangle").value = rect_rule;
return rect_rule;
}
//midpoint rule rule
function midpointRule() {
var limit_a = document.getElementById("a_mid").value;
var limit_b = document.getElementById("b_mid").value;
var functionInput = document.getElementById("funcMidpoint").value;
var limit_diff = limit_b - limit_a;
var x_c = limit_a + limit_b / 2;
var midpoint_rule = limit_diff * getFunction(functionInput, x_c);
document.getElementById("answerMidpoint").value = midpoint_rule;
// return midpoint_rule;
}
.main {
border: 15px solid rgb(199, 124, 62);
padding: 20px;
margin: 20px;
}
.heading1 {
width: 100%;
text-align: center;
}
.body {
background-color: khaki;
}
.rectangle {
width: fit-content;
height: 200px;
}
.math {
font-size: 35px;
}
.Midpoint {
width: fit-content;
height: 200px;
}
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<div class="main">
<h1 class="heading1">Numerical Integration</h1>
</div>
<div>
<p>This is a simple numerical integration calculator. Please choose from the following functions (in the exact same form they are written here):<br> sin, cos, exp.
</p>
<p>
More functionality will be added soon...
</p>
<ul>
<li><a href="#rectangle_rule">The Rectangle Rule</a><br><br>
<li><a href="#midpoint_rule">The Midpoint Rule</a></li><br>
<li>The Trapezoidal Rule</li><br>
<li>Simpson's Rule</li><br>
</ul>
</div>
<!--Rectangle rule start---------------------------------------------------------------------------------------------->
<div class="rectangle" id="rectangle_rule">
<table>
<tr style="height: 15%;">Rectangle Rule<br></tr>
<tr>
<!--mathml for rectangle rule start---------------------------------------------------------->
<math displaystyle="true" class="math">
<mrow>
<msubsup>
<mi>∫</mi>
<mn>a</mn>
<mn>b</mn>
</msubsup>
<mi>f</mi>
<mfenced> <mi>x</mi> </mfenced>
<mi>dx</mi>
</mrow>
<mrow>
<mo>≈</mo>
<mrow>
<mfenced separators="">
<mi>b</mi>
<mo>-</mo>
<mi>a</mi>
</mfenced>
</mrow>
<mi>f</mi>
<mfenced><mi>a</mi></mfenced>
</mrow>
</math>
<!--mathml for rectangle rule end-------------------------------------------------------------->
<td>
Function:
<input type="text" id="funcRectangle" placeholder="sin,cos,exp"> Limit a:
<input type="text" id="a_rect" style="width: 15%;"> Limit b:
<input type="text" id="b_rect" style="width: 15%;"><br>
<input type="button" value="Compute Integral" onclick="rectangle_rule()">
<br>
<br>
<input type="text" id="answerRectangle" readonly="readonly" style="font-size: 20px;">
</td>
</tr>
<br>
</table>
</div>
<!--Rectangle rule end------------------------------------------------------------------------------------------------->
<!--Midpoint Rule start-------------------------------------------------------------------------------------------->
<div class="midpoint" id="midpoint_rule">
<table>
<tr style="height: 15%;">Midpoint Rule<br></tr>
<tr>
<!--mathml for midpoint rule start---------------------------------------------------------->
<math displaystyle="true" class="math">
<mrow>
<msubsup>
<mi>∫</mi>
<mn>a</mn>
<mn>b</mn>
</msubsup>
<mi>f</mi>
<mfenced> <mi>x</mi> </mfenced>
<mi>dx</mi>
</mrow>
<mrow>
<mo>≈</mo>
<mrow>
<mfenced separators="">
<mi>b</mi>
<mo>-</mo>
<mi>a</mi>
</mfenced>
</mrow>
<mi>f</mi>
<mfenced>
<mfrac>
<mi>a+b</mi>
<mi>2</mi>
</mfrac>
</mfenced>
</mrow>
</math>
<!--mathml for midpoint rule end-------------------------------------------------------------->
<!--User input section start------------------------------------------------------------------------->
<td> Function:
<input type="text" id="funcMidpoint" placeholder="sin,cos,exp"> Limit a:
<input type="text" id="a_mid" style="width: 15%;"> Limit b:
<input type="text" id="b_mid" style="width: 15%;"><br>
<input type="button" value="Compute Integral" onclick="midpoint_rule()"><br><br>
<input type="text" id="answerMidpoint" readonly="readonly" style="font-size: 20px;">
</td>
<!--User input section end--------------------------------------------------------------------->
</tr>
<br>
</table>
</div>
当我在中点规则的必填字段中输入数据时,我绝对没有输出。我确实从矩形规则中获取了输出,该输出与使用python编写的代码具有相同的确切功能(矩形规则)一致。
答案 0 :(得分:1)
尝试改为调用midpointRule onclick并在函数中添加console.log,以查看它甚至在第一时间触发。