javascript: Uncaught SyntaxError: Identifier 'FN' has already been declared

Question

困っている事

Uncaught SyntaxError: Identifier 'Ok' has already been declaredの解決方法が分からなく困っています。
エラーとしては、変数を再定義にしたことによって起きています。
原因としては、jsを共通化しようと２つのファイルで同じjsのソースを使用しようとしたところエラーが発生しました。
エラーが起きるタイミングとしては、登録フォーム途中で離脱してから再度登録フォームに戻る時に発生します。
リロードすると直るのですがリロードしなくてもエラーが起きないようにしたいです。

let FN = document.getElementById("firsname");
let LN = document.getElementById("lastname");

const Ok = 'God';
const Bad = 'Bad';


(function () {
  'use strict';
  let inputText = document.getElementById("first_name");

  inputText.addEventListener('keyup', function() {
    let s = inputText.value;
    if(!!s){
      FN.textContent = Ok;
      ChangeGS(FN);
    }else{
      FN.textContent = Bad;
      ChangeBS(FN);
    }
  }, false);
})();

(function () {
  'use strict';
  let inputText = document.getElementById("last_name");

  inputText.addEventListener('keyup', function() {
    let s = inputText.value;
    if(!!s){
      LN.textContent = Ok;
      ChangeGS(LN);
    }else{
      LN.textContent = Bad;
      ChangeBS(LN);
    }
  }, false);
})();

質問に対する返答

「statusOk」は変数名をわかりやすくするために「ok」に変えたのですが、エラー文の中身が未修正でした。

ググった情報

私なりに調べてみたところ。letやconstで宣言されているのが原因で、それらは再定義できないためエラーが起きているとのことでした。解決策としては、varを使用するとで解決できましたがES6での書き方においてvarを使用しても大丈夫なのでしょうか？

Comments

[kei344]

「StatusOk」という変数があるはずですが、提示のものにはありません。また、「遷移した時」とありますが、vue.jsやturbolinksやPjaxなどを使用しているならそれも提示してください。

[nanase21]

遷移したときっているのは私の表現の誤りでvue.jsなどは使用しておりません。遷移の意味としては、入力途中にユーザーが離脱して他のページに移った時を指しています。
他のページに移った後にもう一回登録フォームに戻った時にエラーが発生します。
質問ないにも追記しましたが、letを使用して変数を宣言している箇所をvarに変更したところエラーを回避する事ができました。ただし、気になる点があって、ES6においてvarを使った変数宣言をまだしても大丈夫なのでしょうか？
ご教示いただけると幸いです。

[x_x]

タイトルでは 'FN' となっていますが本文では 'Ok' となっています。どちらが正しいのでしょうか？

[nanase21]

申し訳ございません。
Okです。

Answer 1

同じスクリプトが2回呼ばれる（読み込まれる）書き方になっているはずなので、それを解消しましょう。

Comments

[nanase21]

ご教示いただきありがとうございます。
jsファイルの呼び出しをhtmlテンプレートの一番下に置いているので、そのページに飛ぶとどうしても重複して呼ばれるようになっているのですが２回呼ばれる書き方についてもう少し具体的にご教示いただけないでしょうか？
書き方の参考などがあれば、ご教示いただけると幸いです。

[kei344]

スクリプトをどうやってHTML内に表示させるようになっているのかを提示してください。
また、「jsを共通化しようと２つのファイルで同じjsのソースを使用しようとしたところ」とありますが、それだと共通化になっていないのでは。（同じコードが複数書かれているのは共通化に失敗しています）

[kei344]

To: nanase21 さん
結局どのように解決したか回答欄にお書きいただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

[nanase21]

申し訳ございませんでした。
今、私が解決した方法を回答に載せました。

>スクリプトをどうやってHTML内に表示させるようになっているのかを提示してください。

に関しては、ソースコードが長すぎてアップ出来ないので端的に説明させていただきますと、bodyの一番下に外部のjsファイルを呼び出すようにしています。

Answer 2

ES6から導入されたletやconstといった変数で宣言すると、再読み込み時に再定義出来ずにエラーになるので、今回はvarを使った変数宣言をすることで上記のエラーを解決する事ができました。
おそらく、他にもっとよりよい解決方法があると思いますが私はこの方法で解決できたので一旦質問を閉じさせていただきます。