HTMLで表示した数字に対してJavaScriptで計算し、HTMLに表示したい

Question

概要

JavaScriptのまったくの初心者で、基礎的な質問につき恐縮です。

HTMLで数字の入ったテーブルを表示し、その計算をJavaScriptで行い、HTMLに表示したいと考えています。

HTMLの数字はデータベースから引っ張っていますが、ここではHTMLへの直接打ち込みとしてコードを示させていただきます。

試したこと

                <table class="table table-bordered" id="mytable">
                    <tr>
                      <th>店舗</th>
                      <th>売上</th>
                      <th>経費</th>
                      <th>利益</th>
                    </tr>
                    <tr>
                      <td>店舗A</td>
                      <td id="sales">550</td>
                      <td id="keihi">300</td>
                      <td id="profit">
                        <script>
                          var sales = document.getElementById('sales').value;
                          var keihi = document.getElementById('keihi').value;
                          var profit = Number(sales) - Number(keihi);                     
                          document.write(profit);
                        </script>
                      </td>
                    </tr>
                  </table>

計算結果として利益のところに250と出力されることを期待しているのですが、「NaN」となってしまいます。

ご教授いただけると幸いです。

よろしくお願いいたします。

Answer 1

.value;
↓
.textContent

.valueというプロパティは存在しません。
（作ることはできるが、デフォルトでは存在しない）

Comments

[ak_suzuki]

ありがとうございます！
解決いたしました。

Answer 2

tdの中の文字はvalueではありません

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var sales = parseInt(document.getElementById('sales').textContent);
  var keihi = parseInt(document.getElementById('keihi').textContent);
  var profit = sales-keihi;
  document.getElementById('profit').textContent=profit;
});
</script>

<table class="table table-bordered" id="mytable">
<tr>
<th>店舗</th>
<th>売上</th>
<th>経費</th>
<th>利益</th>
</tr>
<tr>
<td>店舗A</td>
<td id="sales">550</td>
<td id="keihi">300</td>
<td id="profit"></td>
</tr>
</table>

Comments

[ak_suzuki]

ありがとうございます！
解決いたしました。