質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

[ruby on rails]edit.html.erbファイルに、JavaScriptが反映されない。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 332
退会済みユーザー

退会済みユーザー

ruby on railsにて、edit.html.erbファイルに、JavaScriptが反映されないという状況で困っております。
下記内容で不足している点など、ご教示いただけますと幸いでございます。
ご確認のほどよろしくお願いいたします。

●状況
・掲示板サイトを作成しています。
・JavaScriptを使用して、from内が未入力だった際に、submitボタンを押すとエラーメッセージ(アラート)が出るという仕組みを作りたいです。index.html.erbの方はできたのですが、edit.html.erbの方ができません。

●試したこと
・下記の通り、index.html.erbファイルとedit.html.erbファイルに同じコードを書いているのですが、
edit.html.erbの方のファイルでJavaScriptが反映しません。。(form内が空の時にアラートが出ない。)
・hmhrpractices.scss内の、「.hidden{display: none;}」を削除しましたが、その場合はindex.html.erbとedit.html.erbの両方に、エラーメッセージの文が出たままになりました。

「index.html.erb」

    <div id="mask" class="hidden"></div>
    <div id="modal" class="hidden">

            <%= form_with model: @hmhrpractice, local: true do |f| %>
              <div>
                <label>名前</label>
                <%= f.text_field :name, class: "form-control", id: "js-name" %>
                <p id='js-name-error' class="hidden">名前を入力してください。</p>
              </div>

              <div>
                <label>タイトル</label>
                <%= f.text_field :title, class: "form-control",id: "js-title" %>
                <p id='js-title-error' class="hidden">タイトルを入力してください。</p>
              </div>

              <div>
                <label>内容</label>
                <%= f.text_area :content, class: "form-control",id: "js-content" %>
                <p id='js-content-error' class="hidden">投稿内容を入力してください。</p>
              </div>

              <div>
                <%= f.submit "投稿内容を確認する", class: "btn btn-primary", id: "submit",'data-disable-with' => false %>
              </div>
            <% end %>

      <div id="close">
        閉じる
      </div>
    </div>

    <%= javascript_include_tag 'application' %>
「edit.html.erb」

<div>
  <h2>投稿を編集する</h2>
  <%= form_with model: @hmhrpractice,local: true do |f| %>
    <div class="form-group">
      <label>名前</label>
      <%= f.text_field :name, class: "form-control", id: "js-name" %>
      <p id='js-name-error' class="hidden">名前を入力してください。</p>
    </div>
    <div class="form-group">
      <label>タイトル</label>
      <%= f.text_field :title, class: "form-control", id: "js-title" %>
      <p id='js-title-error' class="hidden">タイトルを入力してください。</p>
    </div>
    <div class="form-group">
      <label>投稿内容</label>
      <%= f.text_area :content, class: "form-control", id: "js-content" %>
      <p id='js-content-error' class="hidden">投稿内容を入力してください。</p>
    </div>
    <div class="form-group">
      <%= f.submit "投稿内容を確認する", class: "btn btn-primary", id: "submit",'data-disable-with' => false %>
    </div>
    <% end %>

</div>
<%= javascript_include_tag 'application' %>
「application.js」

{
const $open=document.getElementById('open');
const $close=document.getElementById('close');
const $modal=document.getElementById('modal');
const $mask=document.getElementById('mask');
const $submit=document.getElementById('submit');


$open.addEventListener('click', () => {
    $modal.classList.remove('hidden');
    $mask.classList.remove('hidden');
});

$close.addEventListener('click', () => {
    $modal.classList.add('hidden');
    $mask.classList.add('hidden');
});

$mask.addEventListener('click', () => {
    $close.click();
});

$submit.addEventListener('click', () => {
    if(document.getElementById('js-name').value==''){
        document.getElementById('js-name-error').classList.remove('hidden');
    }
});

$submit.addEventListener('click', () => {
    if(document.getElementById('js-title').value==''){
        document.getElementById('js-title-error').classList.remove('hidden');
    }
});

$submit.addEventListener('click', () => {
    if(document.getElementById('js-content').value==''){
        document.getElementById('js-content-error').classList.remove('hidden');
    }
});


  }
hmhrpractices.scssbody {
  font-size: 14px;
}

#open, #close {
  cursor: pointer;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  padding: 1px 0;
  margin: 0 auto;
}

#mask {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 300px;
  padding: 20px;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: 0.4s;
  z-index: 2;
}

#modal p {
  margin: 0 0 20px;
}

#mask.hidden {
  display: none;
}

#modal.hidden {
  transform: translate(0, -500px);
}

.form-control {
    display: block;
    width: 100%;
}

.post-button {
    display: inline-block;
    float: right;
    font-size: .7rem;
    background-color: #faf6f6;
    color: black;
}

.hidden{
  display: none;
}

#js-name-error,#js-title-error,#js-content-error {
  color: red;
}

#modal p {
  margin: 0;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る