我的JS程序不起作用

时间:2018-02-22 22:45:30

标签: javascript html

大家好,我是JavaScript的新手,我写了一个非常简单的程序。但遗憾的是它无法正常工作。
我希望它执行操作并将结果显示到id为“result”的div中,请帮忙。
只是忽略这个文本,我正在写它,因为我无法上传我的问题..

<html>
<head>
    <title>
        Calculation Exercise.
    </title>
    <script>
        function adding(){
            num1 = document.getElementById("FirstNumber").value;
            num2 = document.getElementById("SecondNumber").value;
            document.getElementById("result").innerHTML = num1 + num2;
            }
        function subtracting(){
            num1 = document.getElementById("FirstNumber").value;
            num2 = document.getElementById("SecondNumber").value;
            document.getElementById("result").innerHTML = num1 * num2;
            }
        function multiply(){
            num1 = document.getElementById("FirstNumber").value;
            num2 = document.getElementById("SecondNumber").value;
            document.getElementById("result").innerHTML = num1 * num2;
            }
        function devide(){
            num1 = document.getElementById("FirstNumber").value;
            num2 = document.getElementById("SecondNumber").value;
            document.getElementById("result"}.innerHTML = num1 / num2;
            }
    </script>
    <style>
        body{
            margin:0; padding:0;}
        h2{
            background-color:yellow; margin-bottom:170; text-align:center;}
        #form1{
            padding-left:760px;}
        #result{
            color:green;}
    </style>
</head>
<body>
    <div>
        <h2>
            Calculation Exercise.
        </h2>
    </div>
    <div id="form1">
        <form>
            1st Number : <input type="text" id="FirstNumber" /> <br> 
            2nd Number : <input type="text" id="SecondNumber" /> <br>
            <input type="button" onClick="adding()" value="adding" /> 
            <input type="button" onClick="subtracting()" value="subtracting" />
            <input type="button" onClick="multiply()" value="multiply" />
            <input type="button" onClick="devide()" value="devide" />
        </form>
        The result is :
            <span id="result"> </span>
    </div>  
</body>

1 个答案:

答案 0 :(得分:1)

有两种语法错误:

  • devide()函数的最后一行在ID }的选择器旁边有)而不是result
  • subtracting()函数中的数学运算目前*用于乘法,但应为-

下面的固定版本!另外,仅供参考,这个词的拼写是“除”(而不是“devide”)。

function adding() {
  num1 = document.getElementById("FirstNumber").value;
  num2 = document.getElementById("SecondNumber").value;
  document.getElementById("result").innerHTML = num1 + num2;
}

function subtracting() {
  num1 = document.getElementById("FirstNumber").value;
  num2 = document.getElementById("SecondNumber").value;
  document.getElementById("result").innerHTML = num1 - num2;
}

function multiply() {
  num1 = document.getElementById("FirstNumber").value;
  num2 = document.getElementById("SecondNumber").value;
  document.getElementById("result").innerHTML = num1 * num2;
}

function devide() {
  num1 = document.getElementById("FirstNumber").value;
  num2 = document.getElementById("SecondNumber").value;
  document.getElementById("result").innerHTML = num1 / num2;
}
body {
  margin: 0;
  padding: 0;
}

h2 {
  background-color: yellow;
  margin-bottom: 170;
  text-align: center;
}

#result {
  color: green;
}
<div>
  <h2>
    Calculation Exercise.
  </h2>
</div>
<div id="form1">
  <form>
    1st Number : <input type="text" id="FirstNumber" /> <br> 2nd Number : <input type="text" id="SecondNumber" /> <br>
    <input type="button" onClick="adding()" value="adding" />
    <input type="button" onClick="subtracting()" value="subtracting" />
    <input type="button" onClick="multiply()" value="multiply" />
    <input type="button" onClick="devide()" value="devide" />
  </form>
  The result is :
  <span id="result"> </span>
</div>