初回ロードだけでイベント発火させたいのですが、リロードしなければイベント発火してくれません。

Question

前提・実現したいこと

プログラミングに初めて触れたばかりの初心者で初めての質問なので、初歩的なミスだと思うのですがお手柔らかにお願いいたします。
javascriptで編集ボタンをクリックすると非同期通信でラベルが非表示になりコメントエリアが表示されるようにしたいです。WebアプリケーションはRailsを使っています。

発生している問題

なんとか表示非表示の変更ができるようになったのですが、初回ロードした後一度リロードしなければ編集ボタンをクリックするというイベント発火ができません。DOMContentLoadedイベントがページ遷移の際に発火されません。

該当のソースコード

window.addEventListener('DOMContentLoaded', () => {
  const corporateEditButton = document.getElementById("js-edit-corporate-btn");
  corporateEditButton.addEventListener("click", () => {
    const corporateListTitle = document.getElementById("js-corporate-label")
    var corporateLabelArea = document.getElementsByClassName("corporate-data")
    var corporateTextArea = document.getElementsByClassName("corporate-text")
    const corporateButton = document.getElementById("js-corporate-button")
    const corporateFormButton = document.getElementById("button-box")
    for(let i = 0; i < 13; i++) {
      corporateFormButton.style.display = "none";
      corporateListTitle.style.display = "none";
      corporateLabelArea[i].style.display = "none";
      corporateTextArea[i].style.display = "block";
      corporateButton.style.display = "block";
    }
  });
});

    <div class='list-title-show'>
      <h2 id='js-corporate-label'>
        <%= @corporate.name %>
      </h2>
      <div id="js-textarea-corporate" class="list-title-edit">
        <input style="display: none;" class="corporate-text" value=<%= @corporate.name %>>
      </div>
    </div>
    <div class='corporate-info'>
      <p class='corporate-data'>
        <%= @corporate.industry %>
      </p>
      <input style="display: none;" class="corporate-text" value=<%= @corporate.industry %>>
      <p class='corporate-data'>
        <%= @corporate.capital %>
      </p>
      <input style="display: none;" class="corporate-text" value=<%= @corporate.capital %>>
      <p class='corporate-data'>
        <%= @corporate.business_content %>
      </p>
      <input style="display: none;" class="corporate-text" value=<%= @corporate.business_content %>>
      <p class='corporate-data'>
        <%= @corporate.strength %>
      </p>
      <input style="display: none;" class="corporate-text" value=<%= @corporate.strength %>>
      <p class='corporate-data'>
        <%= @corporate.weakness %>
      </p>
      <input style="display: none;" class="corporate-text" value=<%= @corporate.weakness %>>
      <p class='corporate-data'>
        <%= @corporate.others %>
      </p>
      <input style="display: none;" class="corporate-text" value=<%= @corporate.others %>>
        <div id="button-box">
          <div class='form-btn-box'>
            <span class="form-btn", id="js-edit-corporate-btn">編集</span>
            <%=link_to 'もどる', root_path, class:"back-btn" %>
          </div>
        </div>
        <div class='form-btn-box' id="js-corporate-button" style="display: none;">
          <button data-update type="submit" class="form-btn">変更</button>
          <button data-cancel type="button" id = "cancel-id" class="edit-back-btn">キャンセル</button>
        </div>
    </div>

試したこと

初めはloadイベントを使っていたのですが、DOMツリーの構築が完了した時点でイベント発火されるDOMContentLoadedイベントの方が速いということが分かりDOMContentLoadedイベントに変更しました。それでも同じように一度ロードしなければならないのは変わりませんでした。
alert()やconsole.log()で動きを確認しましたが、やはり初回ロードでは反応せずもう一度ロードした際に反応がありました。

loadイベントやDOMContentLoadedイベントでは初回ロードでイベント発火させることはできないのでしょうか？
何かご助言を頂けたら幸いです。

Comments

[int32_t]

「ページ遷移」とはどういう操作のことを指していますか? ページの初回ロードやリロードとは違うのですよね?

[tamagokake]

言葉足らずで申し訳ありません。
ページの初回ロードのことをページ遷移と書いてしまいました。初回ロードではイベント発火しないのですが、リロードするとイベント発火するので初回ロードからイベント発火させたいです。

[m.ts10806]

HTMLも提示してください。
コピペで再現できないと応えようがないです。

[int32_t]

DOMContentLoaded イベントは初回のロードでも発火します。
まずは、DOMContentLoaded イベントリスナの先頭に console.log() や alert() でも入れてイベントリスナが呼ばれているかどうかの確認をしましょう。

[shinoharat]

> 初回ロードした後一度リロードしなければ編集ボタンをクリックするというイベント発火ができません。

症状を聞いた感じ、turbolinks のような高速化ライブラリが悪さをしている気がします。
何かのWebアプリケーションフレームワーク（Rails とか、Laravel とか）を使ってたりしますか？

Answer 1

質問文の編集ありがとうございます！

Rails を使っていて、リロードしなければ javascript が動作しないということは、十中八九 Turbolinks（Rails7以降は Turbo）が犯人だと思います。

【１】まずは rails -v コマンドを使って、ご自身のRailsのバージョンを確認してください。

【２】Rails のバージョンが 7 以上 なら、イベントリスナーに turbo:load を加えてください。

- window.addEventListener('DOMContentLoaded', () => {
+ window.addEventListener('DOMContentLoaded turbo:load', () => {

Rails のバージョンが 7 未満 なら、イベントリスナーに turbolinks:load を加えてください。

- window.addEventListener('DOMContentLoaded', () => {
+ window.addEventListener('DOMContentLoaded turbolinks:load', () => {

--

【おまけ】
Turbolinks（または Turbo）というのは、Rails が標準で採用している、ページ遷移高速化ライブラリです。
簡単にWebアプリを高速化できる反面、ライブラリの知識が無い場合、今回のようなトラブルを引き起こすこともあります。

最終的には Turbolinks を使いこなせるようになるのがベストですが、初心者のうちは Turbolinks を off にして基礎を学び、後から Turbolinks 部分を追加で学ぶという手法もアリかと思います。

google で「rails turbolinks」と検索すれば、off にする方法含め、色々と情報が出てくると思いますので、また調べてみてください。

--

ちなみに、Rails 6 までは Turbolinks というライブラリが採用されていましたが、
Rails 7 からは Turbo という別のライブラリを使うようになりました。

名前は似ていますが別物ですので、ググる際は混同しないようにご注意ください。

Comments

[tamagokake]

丁寧に順序立てた解決方法とTurbolinksの知識まで付け加えてくださりありがとうございます！
'DOMContentLoaded'を'turbolinks:load'に変更したら仰ったように解決しました。
Turbolinksについてさらに検索して勉強したいと思います！