如何在Javascript中汇总数字

时间:2018-05-06 17:23:25

标签: javascript sum numbers

嗨我有一张桌子,我希望在第二行“a2”的第一个单元格中显示下拉列表中所选数字的总数+第一行“a1”中的数字。我怎样才能做到这一点?现在我已经向我展示了从下拉列表中选择的数字。另外如何使数字与数字相加并显示总数?

function myFunction() {
    var month = document.getElementById("drop");
    document.getElementById("a2").innerHTML = drop.options[drop.selectedIndex].text;
}
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th, tr{
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}
</style>
</head>
<body>

<form>
  Number:
  <select id="drop" onchange ="myFunction()">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
  </select>
  <br><br>
<table>
    <tr>
  <tr>
    <th id="a1">1</th>
    <th id="b1">2</th>
    <th id="c1">3</th>
    <th id="d1">4</th>
    <th id="e1">5</th>
    <th id="f1">6</th>
    <th id="g1">7</th>
    <th id="h1">8</th>
    <th id="i1">9</th>
    <th id="j1">10</th>
    <th id="k1">11</th>
    <th id="l1">12</th>
    <th id="m1">13</th>
    <th id="n1">14</th>
    <th id="o1">15</th>
    <th id="p1">16</th>
    <th id="q1">17</th>
    <th id="r1">18</th>
    <th id="s1">19</th>
    <th id="t1">20</th>
    <th id="u1">21</th>
    <th id="v1">22</th>
    <th id="w1">23</th>
    <th id="x1">24</th>
    <th id="y1">25</th>
    <th id="z1">26</th>
    <th id="aa1">27</th>
    <th id="ab1">28</th>
    <th id="ac1">29</th>
    <th id="ad1">30</th>
    <th id="ae1">31</th>
  </tr>
  <tr>
    <td id = "a2" >0</td>
    <td id = "b2" >0</td>
    <td id = "c2" >0</td>
    <td id = "d2" >0</td>
    <td id = "e2" >0</td>
    <td id = "f2" >0</td>
    <td id = "g2" >0</td>
    <td id = "h2" >0</td>
    <td id = "i2" >0</td>
    <td id = "j2" >0</td>
    <td id = "k2" >0</td>
    <td id = "l2" >0</td>
    <td id = "m2" >0</td>
    <td id = "n2" >0</td>
    <td id = "o2" >0</td>
    <td id = "p2" >0</td>
    <td id = "q2" >0</td>
    <td id = "r2" >0</td>
    <td id = "s2" >0</td>
    <td id = "t2" >0</td>
    <td id = "u2" >0</td>
    <td id = "v2" >0</td>
    <td id = "w2" >0</td>
    <td id = "x2" >0</td>
    <td id = "y2" >0</td>
    <td id = "z2" >0</td>
    <td id = "aa2" >0</td>
    <td id = "ab2" >0</td>
    <td id = "ac2" >0</td>
    <td id = "ad2" >0</td>
    <td id = "ae2" >0</td>
  </tr>
   <tr>
    <td id = "a3" >0</td>
    <td id = "b3" >0</td>
    <td id = "c3" >0</td>
    <td id = "d3" >0</td>
    <td id = "e3" >0</td>
    <td id = "f3" >0</td>
    <td id = "g3" >0</td>
    <td id = "h3" >0</td>
    <td id = "i3" >0</td>
    <td id = "j3" >0</td>
    <td id = "k3" >0</td>
    <td id = "l3" >0</td>
    <td id = "m3" >0</td>
    <td id = "n3" >0</td>
    <td id = "o3" >0</td>
    <td id = "p3" >0</td>
    <td id = "q3" >0</td>
    <td id = "r3" >0</td>
    <td id = "s3" >0</td>
    <td id = "t3" >0</td>
    <td id = "u3" >0</td>
    <td id = "v3" >0</td>
    <td id = "w3" >0</td>
    <td id = "x3" >0</td>
    <td id = "y3" >0</td>
    <td id = "z3" >0</td>
    <td id = "aa3" >0</td>
    <td id = "ab3" >0</td>
    <td id = "ac3" >0</td>
    <td id = "ad3" >0</td>
    <td id = "ae3" >0</td>
  </tr>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您必须使用parseInt()将您的html或文字转换为数字,并能够对它们求和。

这是一个工作示例,我只修改了一点JS:

&#13;
&#13;
function myFunction() {
    var month = document.getElementById("drop");
    document.getElementById("a2").innerHTML = parseInt(drop.options[drop.selectedIndex].text) + parseInt(document.getElementById("a1").innerHTML);
}
&#13;
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th, tr{
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
}
</style>
</head>
<body>

<form>
  Number:
  <select id="drop" onchange ="myFunction()">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
  </select>
  <br><br>
<table>
    <tr>
  <tr>
    <th id="a1">1</th>
    <th id="b1">2</th>
    <th id="c1">3</th>
    <th id="d1">4</th>
    <th id="e1">5</th>
    <th id="f1">6</th>
    <th id="g1">7</th>
    <th id="h1">8</th>
    <th id="i1">9</th>
    <th id="j1">10</th>
    <th id="k1">11</th>
    <th id="l1">12</th>
    <th id="m1">13</th>
    <th id="n1">14</th>
    <th id="o1">15</th>
    <th id="p1">16</th>
    <th id="q1">17</th>
    <th id="r1">18</th>
    <th id="s1">19</th>
    <th id="t1">20</th>
    <th id="u1">21</th>
    <th id="v1">22</th>
    <th id="w1">23</th>
    <th id="x1">24</th>
    <th id="y1">25</th>
    <th id="z1">26</th>
    <th id="aa1">27</th>
    <th id="ab1">28</th>
    <th id="ac1">29</th>
    <th id="ad1">30</th>
    <th id="ae1">31</th>
  </tr>
  <tr>
    <td id = "a2" >0</td>
    <td id = "b2" >0</td>
    <td id = "c2" >0</td>
    <td id = "d2" >0</td>
    <td id = "e2" >0</td>
    <td id = "f2" >0</td>
    <td id = "g2" >0</td>
    <td id = "h2" >0</td>
    <td id = "i2" >0</td>
    <td id = "j2" >0</td>
    <td id = "k2" >0</td>
    <td id = "l2" >0</td>
    <td id = "m2" >0</td>
    <td id = "n2" >0</td>
    <td id = "o2" >0</td>
    <td id = "p2" >0</td>
    <td id = "q2" >0</td>
    <td id = "r2" >0</td>
    <td id = "s2" >0</td>
    <td id = "t2" >0</td>
    <td id = "u2" >0</td>
    <td id = "v2" >0</td>
    <td id = "w2" >0</td>
    <td id = "x2" >0</td>
    <td id = "y2" >0</td>
    <td id = "z2" >0</td>
    <td id = "aa2" >0</td>
    <td id = "ab2" >0</td>
    <td id = "ac2" >0</td>
    <td id = "ad2" >0</td>
    <td id = "ae2" >0</td>
  </tr>
   <tr>
    <td id = "a3" >0</td>
    <td id = "b3" >0</td>
    <td id = "c3" >0</td>
    <td id = "d3" >0</td>
    <td id = "e3" >0</td>
    <td id = "f3" >0</td>
    <td id = "g3" >0</td>
    <td id = "h3" >0</td>
    <td id = "i3" >0</td>
    <td id = "j3" >0</td>
    <td id = "k3" >0</td>
    <td id = "l3" >0</td>
    <td id = "m3" >0</td>
    <td id = "n3" >0</td>
    <td id = "o3" >0</td>
    <td id = "p3" >0</td>
    <td id = "q3" >0</td>
    <td id = "r3" >0</td>
    <td id = "s3" >0</td>
    <td id = "t3" >0</td>
    <td id = "u3" >0</td>
    <td id = "v3" >0</td>
    <td id = "w3" >0</td>
    <td id = "x3" >0</td>
    <td id = "y3" >0</td>
    <td id = "z3" >0</td>
    <td id = "aa3" >0</td>
    <td id = "ab3" >0</td>
    <td id = "ac3" >0</td>
    <td id = "ad3" >0</td>
    <td id = "ae3" >0</td>
  </tr>
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是正确的功能:

function myFunction() {
    var month = document.getElementById("drop");
    var a1 = Number(document.getElementById("a1").innerHTML);
    var dropVal = Number(drop.options[drop.selectedIndex].text);
    document.getElementById("a2").innerHTML = dropVal + a1;
}