＃ローカルでは保存できるが本番環境では保存ができない

Question

＃現在の作業していること

スコア計算のアプリケーションを作成してます。合計点を自動的に出力しており、合計点数は保存せず入力値のみrailsのform_withで保存するようにしてます。
ローカルではうまく保存ができておりますが、コンソールには
「Uncaught TypeError: Cannot read property 'addEventListener' of null」というエラーメッセージが出でおります。

本番環境でも検証ツールを使いエラーを確認したところ上記のエラーと「500 (Internal Server Error)」がでておりました。

自分なりに調べたことでの考えとしては、javascriptで取得した値をform_withで保存していることによりデータが重たくなっているのかなと
思いました。また、jsonを使用して保存しないといけないのかな？とも思いました。

間違っていたら併せてご教授いただければ幸いです。

ローカルでは保存できて本番環境ではエラーになる点が調べてもあまり理解できずアドバイスをいただけないでしょうか？

何卒、宜しくお願いいたします。足りない情報等ありましたらすぐに対応いたします。

＃javascriptを使用し下記の記述を行いました。

#javascript
//１回目の点数
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_total_score = (first_fa_score + second_fa_score);
    fa_total.innerHTML = second_total_score 
  })
  
  // ３回目の点数
  var third_score = document.getElementById("third-fa-score-field");
  third_score.addEventListener("input", function() {
    var third_fa_score = parseInt(third_score.value);
    var score = document.getElementById("first-fa-score-field");
    var first_fa_score = parseInt(score.value);
    var second_score = document.getElementById("second-fa-score-field");
    var second_fa_score = parseInt(second_score.value);
    var fa_total = document.getElementById("fa-total");

    third_total_score = (first_fa_score + second_fa_score + third_fa_score)
    fa_total.innerHTML = third_total_score 
    
  })
})

Answer 1

Uncaught TypeError: Cannot read property 'addEventListener' of null

このエラーは、nullの変数に'addEventListener'は存在しない、とおっしゃってますんで、それ付いてる変数のナカミを確認してみればどうでしょう

Comments

[akari0509]

ご回答ありがとうございます。
ローカルでconsole.log(first_fa_score)と記述したところ値がとれていました。
その他原因として何が考えられますでしょうか？
何度も質問して申し訳ございません。

[y_waiwai]

んでそこでそのエラーは出てるんでしょうか。
エラーの出るところで見ないと意味ありませんよ

[y_waiwai]

と書いたところで気がついたけど、
first_fa_scoreにaddEventListenerつけたところってありましたっけ

[akari0509]

y_waiwaiさん
ご回答ありがとうございます。
ターミナルのログを調べたところ下記のエラーが出ました。
```
Completed 500 Internal Server Error in 41ms (ActiveRecord: 17.4ms | Allocations: 3215)
ActiveRecord::NotNullViolation (Mysql2::Error: Field 'f_total' doesn't have a default value):
```
f_totalは合計点数を表示しているだけで保存はしないのですが。。。
エラーに関して調べているのですが、解決策が未だ見つかっておりません。。。
度々申し訳ないのですが、アドバイスをいただけないでしょうか？