JS ボタンクリック時に実行をさせたい

Question

実現したいこと

ボタンをクリックした時にこのGIF動画（Gyazo)「Total」の部分に
計算結果が表示されるような処理を行いたいのですが、うまく行きません。
この場合どうしたら良いでしょうか。。。ご教授をお願いいたします。

（動画の対象部分となるhtmlは「#対象箇所」として括っています。）

該当のソースコード

window.addEventListener('load', () => {
  document.getElementById("scorebtn").addEventListener('click', function(){
    
    const fxd_Input = document.getElementById("fx_d");
    fxd_Input.addEventListener("input", () => {
      const input_fxd_Value = fxd_Input.value;
      
      const fxe_Input = document.getElementById("fx_e");
      fxe_Input.addEventListener("input", () => {
        const input_fxe_Value = fxe_Input.value;
        
        const floor_total = document.getElementById("fx_total");
        floor_total.innerHTML = parseFloat(input_fxd_Value) + parseFloat(input_fxe_Value);
        
      })
    })
  })
})

<%= form_with local: true do |f| %>
    <table class="table table-bordered m-4">
      <thead>

        <tr>
　　　　　#対象箇所１
          <th scope="col"><button type="button" id="scorebtn" class="btn btn-primary w-10 mt-2">計算</button></th>
　　　　　#対象箇所１
          <th scope="col" colspan="2">FX</th>
          <th scope="col" colspan="2">PH</th>
          <th scope="col" colspan="2">Ri</th>
          <th scope="col" colspan="2">Vo</th>
          <th scope="col" colspan="2">PB</th>
          <th scope="col" colspan="2">HB</th>
        </tr>
      </thead>
  <% @athlete.each do |athlete| %>
      <tbody>
      
        <tr>
            <th scope="row" rowspan="2"><%= athlete.name %></th>
　　　　　#対象箇所２
          <td><%= f.text_field :floor_score_d, class:"form-control", id:"fx_d", placeholder:"D-score" %></td>
　　　　　#対象箇所２
          <td rowspan="2" id="fx_total">Total</td>
          <td><%= f.text_field :pommel_score_d, class:"form-control", id:"ph_d", placeholder:"D-score" %></td>
          <td rowspan="2" id="ph_total">Total</td>
          <td><%= f.text_field :rings_score_d, class:"form-control", id:"ri_d", placeholder:"D-score" %></td>
          <td rowspan="2" id="ri_total">Total</td>
          <td><%= f.text_field :vault_score_d, class:"form-control", id:"vo_d", placeholder:"D-score" %></td>
          <td rowspan="2" id="vo_total">Total</td>
          <td><%= f.text_field :parallel_score_d, class:"form-control", id:"pb_d", placeholder:"D-score" %></td>
          <td rowspan="2" id="pb_total">Total</td>
          <td><%= f.text_field :horizontal_score_d, class:"form-control", id:"hb_d", placeholder:"D-score" %></td>
          <td rowspan="2" id="hb_total">Total</td>
        </tr>
        <tr>
　　　　　#対象箇所3
          <td><%= f.text_field :floor_score_e, class:"form-control", id:"fx_e", placeholder:"E-score" %></td>
        #対象箇所3
          <td><%= f.text_field :pommel_score_e, class:"form-control", id:"ph_e", placeholder:"E-score" %></td>
          <td><%= f.text_field :rings_score_e, class:"form-control", id:"ri_e", placeholder:"E-score" %></td>
          <td><%= f.text_field :vault_score_e, class:"form-control", id:"vo_e", placeholder:"E-score" %></td>
          <td><%= f.text_field :parallel_score_e, class:"form-control", id:"pb_e", placeholder:"E-score" %></td>
          <td><%= f.text_field :horizontal_score_e, class:"form-control", id:"hb_e", placeholder:"E-score" %></td>
        </tr>
      </tbody>
  <% end %>
    </table>
<% end %>  

言葉足らずな部分がありましたら申し訳ございません。
よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

ブラウザ：Chrome
bootstrap：4.1.1
ruby:2.6.5
rails:6.0.0

Comments

[m.ts10806]

画像ならリンクよりteratailの画像投稿機能を利用してください。
あと、addEventが入れ子になってますが、この意図は？

[kanix2020]

ご指摘ありがとうございます。

画像ならリンクよりteratailの画像投稿機能を利用してください。
⇨　画像ではなくGyazoで撮影したGIF動画にさせていただいております。

addEventが入れ子になってますが、この意図は？
⇨addEventについて深く理解をしておらず、記載の方法でないといけないと言う先入観で書いておりました。
　もう少しコードの１つ１つの意味を学習した上で再度質問しようかと思います。

Answer 1

こんにちは。やりたい事の情報が添付gifから全て読み取れないので、推測して回答しますね。

FX,PH,RI,など複数の項目がありますが、計算ボタンをクリックすると項目毎にD-scoreとE-scoreの計算を行いTotalに出力するという要件とします。

その上で質問者さんのJavaScriptで直すべき所を箇条書きにします。

・addEventListenerを入れ子にしてしまっている。
これの何が良くないかというと最初の要素のイベントが発生しないと、次のイベントの監視を開始しないという所です。

・最後のinputイベントが発生したら計算を行って出力している
ボタンをクリックをしたら計算結果を表示したいのであれば、必要なイベントはクリックイベントのみです。

・要素をIDで取得してしまっている

const fxd_Input = document.getElementById("fx_d");
const fxe_Input = document.getElementById("fx_e");
const floor_total = document.getElementById("fx_total");

上記のコードが見受けられますが、FX ~ HBまで6種類もあるので全て書くとなるとコード量が非常に多くなってしまいます。
FX ~ HBの共通の要素を見つけましょう。D-score入力要素とE-score入力要素とTotal出力要素があるかと思います。
共通の要素をクラスとして名前を付けてJavaScriptではIdではなくClassNameで取得するようにしましょう。
以下修正したHTMLですが、td構造だと3つの要素をグループ化しづらいので、tdからdivに変え、cssのgridを使ってセルの結合を表現しています。
※rubyは使わないので、htmlにして2列だけ抜粋しています。

<tbody>
  <tr>
    <th scope="row">テスト1</th>
    <td>
      <div class="score-group grid-container">
        <div class="total grid-item">
          Total
          <span class="output-score-total"></span>
        </div>
        <div class="d-score grid-item">
          <input
            type="number"
            step="0.1"
            name="floor_score_d"
            class="form_control input-socre-d"
            placeholder="D-score"
          />
        </div>
        <div class="e-score grid-item">
          <input
            type="number"
            step="0.1"
            name="floor_score_e"
            class="form-control input-socre-e"
            placeholder="E-score"
          />
        </div>
      </div>
    </td>
    <td>
      <div class="score-group grid-container">
        <div class="total grid-item">
          Total
          <span class="output-score-total"></span>
        </div>
        <div class="d-score grid-item">
          <input
            type="number"
            step="0.1"
            name="pommel_score_d"
            class="form_control input-socre-d"
            placeholder="D-score"
          />
        </div>
        <div class="e-score grid-item">
          <input
            type="number"
            step="0.1"
            name="pommel_score_e"
            class="form-control input-socre-e"
            placeholder="E-score"
          />
        </div>
      </div>
    </td>
  </tr>
</tbody>

グルーピング用の.score-groupとE-score用の.input-socre-eとD-score用の.input-socre-dとTotal用の.output-score-totalを要素に加えたので、クラス名で処理を行なうようにJavaScriptも以下のように修正します。

// 他のJSファイルの関数定義（以下のmain,calc関数）と被らないように即時関数でスコープを作る
(function () {
  // 全体の処理の起点となる関数
  function main() {
    // 使う要素を予め全て取得しておく
    const scorebtn = document.getElementById("scorebtn");
    // 各列のD-score入力、E-score入力、Total出力の要素をグループ化して取得する
    const scoreGroups = document.getElementsByClassName("score-group");
    // #scorebtnがクリックされたら処理を開始
    scorebtn.addEventListener("click", () => {
      // グループを一つずつ処理
      for (const scoreGroup of scoreGroups) {
        // グループ内の出力要素を取得
        const output = scoreGroup.getElementsByClassName(
          "output-score-total"
        )[0];
        // グループ内のD-score入力要素を取得
        const inputD = scoreGroup.getElementsByClassName("input-socre-d")[0];
        // グループ内のE-score入力要素を取得
        const inputE = scoreGroup.getElementsByClassName("input-socre-e")[0];

        // 上記3つのいずれかの要素が取得出来なかったら、そのグループの計算は行わない
        if (!output || !inputD || !inputE) continue;

        // 計算を行なう（計算式がわからなかったので、calc関数を調整してください）
        const result = calc(parseFloat(inputD.value), parseFloat(inputE.value));
        output.textContent = result;
      }
    });
  }

  // 計算式
  function calc(a, b) {
    const result = a + b;
    // 文字列が入力された場合はnullを返します。
    // input要素をnumberにすれば必要ないと思います。
    return isNaN(result) ? null : result;
  }

  // loadにすると画像などの読み込みも待ってしまうので、DOMの準備が出来たら開始するように変更しました。
  document.addEventListener("DOMContentLoaded", main);
})();

実際に動いているのをCodeSandBoxに上げましたので、触ってみたかったらご自由にどうぞ。
https://codesandbox.io/s/teratailcomquestions323650-kjuj8?file=/index.html

この問題はJavaScript初心者にはそこそこ難しいと感じました。めげずに頑張ってください〜

Comments

[kanix2020]

返事が遅くなり申し訳ございません。
説明不足なのにも関わらずかなり丁寧に教えていただきありがとうございます。
おっしゃる通り、推測して頂いた動きを行いたく存じます。
（体操競技の採点をWeb上で行えるようにしたいと思っておりまして、
　FX＝床
　PH＝あんば
　Ri＝吊輪
　Vo=跳馬
　PB＝平行棒
　HB＝鉄棒
といった具合です。）

頂いたご回答を熟読させて頂き、実践したいと思います。
私も早く理解をし、教えられる側になれるよう、頑張ります！