Как сложить числа в Javascript - PullRequest
Новая
       10

Как сложить числа в Javascript

0 голосов
/ 06 мая 2018

Привет, у меня есть таблица, в которой я хочу, чтобы в первой ячейке второй строки «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 голосов
/ 06 мая 2018

Вот правильная функция: 

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;
}
0 голосов
/ 06 мая 2018

Вы должны использовать parseInt(), чтобы преобразовать ваш HTML или текст в числа и суммировать их.

Вот рабочий пример, где я только немного изменил JS: 

function myFunction() {
    var month = document.getElementById("drop");
    document.getElementById("a2").innerHTML = parseInt(drop.options[drop.selectedIndex].text) + parseInt(document.getElementById("a1").innerHTML);
}
<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>
...