Html/Javascript table with built in calculator

Question

I got this table with a built in calculator function that select from different parts of the table and adds every thing up at the end. But my problem is that if I hit one of the squares with letters inside of them instead of numbers, the calculator breaks, how do I fix it?

How do I make the first like containing information(car names) unclickable, and only the first 5 squares. The table code :

 <table>
      <tr>
        <th bgcolor="b8cce4">Modell</td>
          <th>Trend</td>
            <th>Titanum</td>
              <th>Familiepakke</td>
                <th>Førerassistentpakke</td>
                  <th>Stilpakke</td>
                    <th>Sluttpris</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>Kuga</b></td>
        <td>401000</td>
        <td>420000</td>
        <td>1000</td>
        <td>10200</td>
        <td>9200</td>
        <td>kr</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>C-max</b></td>
        <td>320000</td>
        <td>335000</td>
        <td>1000</td>
        <td>9400</td>
        <td>3600</td>
        <td>kr</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>Focus</b></td>
        <td>255000</td>
        <td>325000</td>
        <td>900</td>
        <td>12500</td>
        <td>9000</td>
        <td>kr</td>
      </tr>
      <tr>
        <td bgcolor="b8cce4"><b>Mondeo</b></td>
        <td>281000</td>
        <td>361000</td>
        <td>1100</td>
        <td>9900</td>
        <td>7200</td>
        <td>kr</td>
      </tr>

The script:

   (function() {
      var tds = document.querySelectorAll('tr td:not(:last-child)');
      for (var td in tds) {
        tds[td].addEventListener('click', function(evt) {
          evt.target.classList.toggle('selected');
          var total = 0;
          var parentTr = evt.target.parentNode;
          var selected = parentTr.querySelectorAll('.selected');
          for (var k in selected) {
            if (selected[k].innerText) {
              total += parseInt(selected[k].innerText);
            }
          }
          parentTr.querySelector('td:last-child').innerText = total;
        });
      }
    })();

score 0 · Accepted Answer · answered Jan 08 '16 at 10:17

0

In your loop, test to see if it is a numeric field and only then process it:

if ((selected[k].innerText) && (/^\d+$/.test(selected[k].innerText))) {
    total += parseInt(selected[k].innerText);
}

answered Jan 08 '16 at 10:17

Johannes Jander

4,974
2
31
46

Thanks that fixed the problem regarding the text in that box, but it seems that if i click somewhere aroudn the text, it will give me NaN.How do I make the entire box untargetable? – tinny tim Jan 08 '16 at 10:56
Either you use the [isNaN()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN) function in the `if`clause above or you set a class `clickable` on the numeric cells and use jQuery's `hasClass()` (https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-has-a-particular-class/) to make sure you do the `parseInt()` only on cells that have this `clickable` flag class. There's a [SO question](https://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric) about how to safely determine if a string is numeric. – Johannes Jander Jan 08 '16 at 11:47
And by the way, in your table-head, please do close the right tags, everytime you write something like `Titanum` (open a `th`-tag and close a `td`-tag), a kitten dies somewhere – Johannes Jander Jan 08 '16 at 11:50

score -1 · Answer 2 · answered Oct 27 '22 at 17:42

Try adding contenteditable to your code as shown below, its been working for my table

<th bgcolor="b8cce4" contenteditable="false">Modell</td>
          <th contenteditable="false">Trend</td>
            <th contenteditable="false">Titanum</td>
              <th contenteditable="false">Familiepakke</td>
                <th contenteditable="false">Førerassistentpakke</td>
                  <th contenteditable="false">Stilpakke</td>
                    <th contenteditable="false">Sluttpris</td>

Html/Javascript table with built in calculator

2 Answers2