入力フォームの値を使った計算結果を表で表示させる方法

Question

入力フォームに、りんご、みかんそれぞれの個数を入力すると、合計金額が表示されるようにしたいです。

りんご、みかんの単価は設定しているという前提で、それぞれ10~100個ずつ買った時の金額を表として表示するものです。

計算としては、(りんご個数りんご単価+みかん個数みかん単価)*n(n=10,20,30,・・・,100)と単純なのですが、
値の計算を複数回行うということで行き詰まっています。

ワードプレスに表示させることを目標にしており、現状、HTMLのみですが、HTML、javascriptどちらも初心者のため、ここからどうすればいいのかわかりません。

自分で調べて試してみましたが、うまくいかないため、アドバイスお願いします。

<form>

<p>りんご  <input type="tel" name="pips" style="width:100px;"></p>
<p>みかん  <input type="tel" name="market" style="width:100px;"></p>

<table>
  <tbody>
    <tr>
      <td></td>
      <td>10</td>
      <td>20</td>
      <td>30</td>
      <td>40</td>
      <td>50</td>
      <td>60</td>
      <td>70</td>
      <td>80</td>
      <td>90</td>
      <td>100</td>
    </tr>
    <tr>
      <td>合計金額/td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
 </tbody>
 </table>
<form>

Answer 1

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var tanka={
  ringo:parseInt(document.querySelector('[name=ringo]').dataset["tanka"]),
  mikan:parseInt(document.querySelector('[name=mikan]').dataset["tanka"]),
  };
  var num=[].map.call(document.querySelectorAll('#t1 thead th'),function(x){
    return parseInt(x.textContent)||"";
  });
  [].forEach.call(document.querySelectorAll('[data-tanka]'),function(x){
    x.addEventListener("input",function(){
      [].forEach.call(document.querySelectorAll('#t1 tbody td'),function(x,y){
        if(num[y]=="") return;
        var v=0
          +tanka["ringo"]*parseInt(document.querySelector('[name=ringo]').value)
          +tanka["mikan"]*parseInt(document.querySelector('[name=mikan]').value);
        x.textContent=num[y]*v;
      });
    });
    
  });
});
</script>
りんご(単価100)：<input type="text" name="ringo" class="fruit" data-tanka="100" value="0" pattern="\d+"><br>
みかん(単価80)：<input type="text" name="mikan" class="fruit" data-tanka="80" value="0" pattern="\d+"><br>
<table id="t1" border>
<thead>
<tr>
<th>&nbsp;</th>
<th>10</th>
<th>20</th>
<th>30</th>
<th>40</th>
<th>50</th>
<th>60</th>
<th>70</th>
<th>80</th>
<th>90</th>
<th>100</th>
</tr>
</thead>
<tbody>
<tr>
<td>合計金額</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>

Comments

[vpp.ysk]

ありがとうございます。
期待通りの結果となりました！

差し支えなければ、以下2点についてもアドバイスいただけないでしょうか？
・桁が増えた際の表のレイアウトを保つ
・数値の桁をカンマで区切る

[yambejp]

「桁が増えた際の表のレイアウトを保つ」は具体的に何をしたいかわかりません

[yambejp]

「数値の桁をカンマで区切る 」については
・数値の桁をカンマで区切る

「x.textContent=num[y]*v;」の箇所を以下に
x.textContent=(num[y]*v).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');

[vpp.ysk]

「桁が増えた際の表のレイアウトを保つ」については、表示される数値が大きくなると、表もそれに合わせて大きくなるため、表の大きさを固定して、文字サイズを調整したい、という意図でした。
こちらに関しては、調べて解決できました。

ご回答ありがとうございました。

Answer 2

値の計算を複数回行うということで行き詰まっています

わかりやすいのは配列を使う形ではないでしょうか。

var price = 1000; // りんご個数*りんご単価+みかん個数*みかん単価
var total = new Array(10);
var n = [10,20,30,40,50,60,70,80,90,100];
var total = new Array(n.length);
for ( var i=0; i<10; i++) total[i] = price * n[i];

// total は [10000,20000,30000,40000,50000,60000,70000,80000,90000,100000]

Comments

[vpp.ysk]

ご回答ありがとうございます。

計算部分については、ご回答いただいた形で実現できたのですが、
フォームからの値の受け取りや、計算結果を表示させる部分についても、アドバイスいただけると助かります。

現状のhtmlを追記致しましたので、ここにどのようにjavascriptを組み込めばいいか教えていただければと思います。