＃javascriptでスコアの入力機能で一度入力した値を変更するとNaNになってしまう

Question

＃javascriptでスコアの入力機能の実装を行っております。
スコアを入力すると合計に反映するようにはなりましたが、入力し直すとNaNになってしまいます。
現状としては、スコアの入力が一回と二回があり、二回目の入力を修正するとNaNになり、一回目から入力するとうまく反映する状態です。
入力ミスをしてしまうと一回目から入力しなおさないといけません。

それを改善するために現在の記述での改善点をアドバイスいただけないでしょうか？
よろしくお願いいたします。

＃現在の記述

#javascript

// 一回目
window.addEventListener("load", function() {
  let score = document.getElementById("first-fa-score-field");
  score.addEventListener("input", function() {
    let first_fa_score = parseInt(score.value);
    let fa_total = document.getElementById("fa-total");

    fa_total.innerHTML = first_fa_score;
    
    // 二回目
    let second_score = document.getElementById("second-fa-score-field");
    second_score.addEventListener("input", function() {
      let second_fa_score = parseInt(second_score.value);
      let fa_total = document.getElementById("fa-total");

      second_score = (first_fa_score + second_fa_score);

      ##以下の入力が一回目は反映するが、修正するには一回目の入力からやりなおさないといけない。
      fa_total.innerHTML = second_score 
　　})
  })
})

私の考えとしては一回目の記述の入れ子になっているからかな？と思いました。
一回目の入れ子にはせず記述もしてみたのですがうまくいかず詰まっております。
ご教授お願いいたします。

Answer 1

second_score.addEventListener("input", function() {
      let second_fa_score = parseInt(second_score.value);
      let fa_total = document.getElementById("fa-total");

      second_score = (first_fa_score + second_fa_score); // first_fa_scoreの定義がない

      fa_total.innerHTML = second_score 
　　})

上記コードのコメントにも書きましたが、first_fa_scoreの定義がありません。
そのため、(undefined + second_fa_score) = NaNになっていると思われます。

ちなみにletでの変数定義ではscore.addEventListener内で記述した変数はその内部にある関数内では使えないので、グローバルで定義するか、varで変数定義するなどの他の方法を取る必要があります。（仮に使えるならfa_totalの同名宣言でエラー起きますし。）

Comments

[akari0509]

yuuyuさん

ご回答ありがとございます。
自分なりに記述を変更してみたのですが、一度入力した数値はうまく反映してくれます。
ただ、例で言うと二回目の入力をはじめは１と入力したのを２に変更するとNaNになってしまいます。

変更した記述は下記です。

```
// 一回目
window.addEventListener("load", function() {
var score = document.getElementById("first-fa-score-field");
score.addEventListener("input", function() {
var first_fa_score = parseInt(score.value);
var fa_total = document.getElementById("fa-total");

fa_total.innerHTML = first_fa_score;
})
// 二回目
var second_score = document.getElementById("second-fa-score-field");
second_score.addEventListener("input", function() {
var second_fa_score = parseInt(second_score.value);
var score = document.getElementById("first-fa-score-field");
var first_fa_score = parseInt(score.value);
var fa_total = document.getElementById("fa-total");

second_score = (first_fa_score + second_fa_score);
fa_total.innerHTML = second_score
})
})
```
何度も申し訳ないのですが、ご教授いただけると幸いです。
よろしくお願いいたします。

[yuuyu]

second_score = (first_fa_score + second_fa_score); // 下から4行目

代入先のsecond_scoreは元々document.getElementById("second-fa-score-field");を入れていたにも関わらず、数値を入れてしまっているので、次のsecond_score.valueがundefinedになっているようです。

[akari0509]

yuuyuさん

たびたびご回答ありがとうございます！
修正できるようになりました！助かりました！