DOM操作

概要

日付、税別価格、仕込み価格のデータをテーブルデータに反映させる。

HTML

index.html

    <tr>
      <th>日付け</th><th>税抜</th><th>結果</th>
    </tr>
    <tr> 
      <th id="day">データ</th><th id="taxNo">データ</th><th id="total">データ</th>
    </tr> 

今回は、こちらのテーブルデータに書き換えを行っていきます。

JS

index.js

   const hizuke = date();
   const sub = totalTax();
   const noTax = document.getElementById('number').value;

   const win =[hizuke,noTax,sub];


   document.getElementById('day').textContent = win[0];
   document.getElementById('taxNo').textContent = win[1];
   document.getElementById('total').textContent = win[2];

データ内容を配列に格納しました。

それぞれの格納場所にデータを配置していきます。

配列からのアクセス

現在winの中にはデータとしてhizuke,notax,subが格納されています。
ここから各テーブルの中に代入していきます。
①日付け欄にwinの０番目の値、hizukeを代入します。
②税別欄にwinの1番目の値、notaxを代入します。
③税込み欄にwinの値、subを代入します。

*配列は先頭から0番始まりです。

データがすべて反映されました。

今回やりたいこととしては、データ反映とそれに伴い行を増やすことです。
for文とdocument.createElementを使って行きたいと思います。