我的代码无法运行,但是我想这是因为我缺乏html / javascript的经验

时间:2019-07-12 17:08:55

标签: javascript html math

我正在编写一个简单的网页,该网页将对基本基本功能(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>&int;</mi>
                                        <mn>a</mn>
                                        <mn>b</mn>
                                    </msubsup>
                                    <mi>f</mi>
                                    <mfenced> <mi>x</mi> </mfenced>
                                    <mi>dx</mi>
                                </mrow>
                                <mrow>
                                    <mo>&asymp;</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>&int;</mi>
                                <mn>a</mn>
                                <mn>b</mn>
                            </msubsup>
                            <mi>f</mi>
                            <mfenced> <mi>x</mi> </mfenced>
                            <mi>dx</mi>
                        </mrow>
                        <mrow>
                            <mo>&asymp;</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编写的代码具有相同的确切功能(矩形规则)一致。

1 个答案:

答案 0 :(得分:1)

尝试改为调用midpointRule onclick并在函数中添加console.log,以查看它甚至在第一时间触发。