JavaScript не находит элементы в макете - PullRequest
Новая
       0

JavaScript не находит элементы в макете

0 голосов
/ 26 июня 2018

У меня есть программа ruby ​​on rails, которая отображает флэш-сообщение в макете приложения следующим образом: 

<% if flash[:notice] %>
   <p id="notice">
      <span id="notice-button-left">[-]</span>
      <%= flash[:notice] %>
      <span id="notice-button-right">[-]</span>
   </p>
<% end %>

и при нажатии <spans> # примечание-кнопка-слева и # уведомление-кнопка-правильно, я хочу, чтобы <p> исчез, поэтому я добавил код: 

document.getElementById("notice-button-right").addEventListener("click", function(){
    document.getElementById("notice").style.display = "none";
});

document.getElementById("notice-button-left").addEventListener("click", function(){
    document.getElementById("notice").style.display = "none";
});

в тег <script> и бросил его в макет application.html.erb.Это сработало отлично.Однако когда я вынул тег <script> и бросил js в файл .js в папке app / assets / javascripts, он перестал работать.При проверке браузера он, похоже, находит файл js, но js просто не работает.

Примечание 1: у меня есть другой скрипт, который работает

Примечание 2: У меня есть turbolinksвыключено

Мне бы хотелось, чтобы скрипт работал, а уведомление исчезло при нажатии на пролеты.

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Загрузите ваш скрипт прямо перед </body>, если он в данный момент находится в <head>.Вполне вероятно, что DOM Content, на который ссылается ваш скрипт, еще не представлен.Загрузка скриптов после визуализации разметки должна исправить это и обеспечить лучшую скорость работы вашего сайта.

Альтернатива заключается в том, чтобы обернуть ваши сценарии в событие DOMContentLoaded, но, как правило, в любом случае вы захотите держать свои сценарии дальше вниз по странице.

0 голосов
/ 26 июня 2018

Попробуйте поместить свой код javascript в готовый документ, поскольку, похоже, вы не используете jQuery, что-то вроде этого должно работать в папке app / assets / javascripts: 

document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById("notice-button-right").addEventListener("click", 
    function(){
      document.getElementById("notice").style.display = "none";
    });

  document.getElementById("notice-button-left").addEventListener("click", 
    function(){
      document.getElementById("notice").style.display = "none";
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...