Ruby on Railのアセットパイプラインから読み込まれたレイアウトにJavascript関数をリンクしていますか？

Question

静的なページレイアウトでアセットパイプラインのロードされたjavascriptファイル（app/assets/javacripts/bootstrap.js）から関数をリンクすると、次のように取得されます。Uncaught ReferenceError：myFunctionが定義されていません。私は何時間もグーグルで行ってきましたが、Rubyの中でCoffeescriptやJqueryやメソッドを使わずに、この関数を私の.jsファイルから私のビューのレイアウトにリンクしたいと思っています。任意の具体的な説明や、これを行う方法に関する私のリソースにリンクすることができれば...または、パイプラインを邪魔しないようにJavascriptをすばやくリンクするチュートリアルであるもの。前もって感謝します。ここで

は、JavaScriptの関数である。ここでは

/* When the user clicks on the button, 
    toggle between hiding and showing dropdown content */ 
    function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
    } 

    // Close the dropdown menu if the user clicks outside of it 
    window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

     var dropdowns = document.getElementsByClassName("dropdown-content"); 
     var i; 
     for (i=0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
      openDropdown.classList.remove('show'); 
     } 
     } 
    } 
    } 

は、対応するCSSです：ここでは

/* Dropdown Button */ 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

/* Dropdown button on hover & focus */ 
.dropbtn:hover, .dropbtn:focus { 
    background-color: #3e8e41; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 

/* Dropdown content (Hidden by Default) */ 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu (use JS to add this class to the .dropdown- content container when the user clicks on the dropdown button) */ 
.show {display:block;} 

は私のhtmlです：

   <li> 
        <div class="dropdown"> 
         <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
         <div id="myDropdown" class="dropdown-content"> 
          <a href="#work_places">Work Places</a> 
          <a href="#living_places">Living Places</a> 
          <a href="#learning_places">Learning Places</a> 
          <a href="#interiors">Interiors</a> 
          <a href="#miscellaneous">Miscellaneous</a> 
         </div> 
        </div> 
       </li> 

Answer 1

は、このよう（にあなたの関数を定義してくださいうまくいけば）それをあなたの視野でグローバルかつアクセス可能にする：

this.myFunction = function() { 
    document.getElementById('myDropdown').classList.toggle('show'); 
}; 

そうしないと、ビューからonclickの削除およびJavaScriptファイル内でそれを添付することができます

document.getElementsByClassName('dropbtn')[0].onclick = function() { 
    document.getElementById('myDropdown').classList.toggle('show'); 
};