Linking a Javascript function on a layout that is loaded from the asset pipeline in ruby on rails?

Question

When I link a function from an asset pipeline loaded javascript file(app/assets/javacripts/bootstrap.js) in my static page layout upon inspection I get: Uncaught ReferenceError: myFunction is not defined. I have googled for hours and without using Coffeescript or Jquery or methods inside of ruby I would simply like to link this function from my .js file into an layout in my views. Any specific explanation or if you could link me to any resources on how to do this...or something that is a tutorial designed to quickly link Javascript into views not disturbing the pipeline that would be great. Thank you in advance.

Here is the Javascript function:

  /* 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');
        }
      }
    }
  }

Here is the corresponding 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;}

Here is my 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

Try defining your function this way to (hopefully) make it global and accessible in your view:

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

Otherwise you can remove onclick from the view and attach it within the javascript file:

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