If I use script tags with my code in it at the bottom beneath the closing body tag the javascript executes like it should. However I want to write many functions for other things to happen on the page and so it gets busy if I do it all on script tags, which is why I want separate external files for where the code lives and then in the head tags invoke my code with script src, etc.
I am running rails 5.2.2 and it isn't loading my external js files at all. At first I thought maybe it was broken code but alas I can't even get a simple alert event to work so I know it's not the code and in addition my function works when I stick it in script tags on the html view. Help! I am sort of a nascent hobbyist programmer and not the best of googlers so any and all feedback is appreciated.
<!DOCTYPE html>
<head>
<script src="edit_cp.js"></script>
</head>
<body>
...
</body>
</html>
application.js file
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
edit_cp.js file
var editCoverPhoto = document.getElementById("cp_button");
editCoverPhoto.addEventListener("mouseover", showMessage);
editCoverPhoto.addEventListener("mouseleave", removeMessage);
var para = document.createElement("p");
var textNode = document.createTextNode("Edit Cover Photo");
para.appendChild(textNode);
function showMessage() {
editCoverPhoto.appendChild(para);
para.style.color = "black";
}
function removeMessage() {
editCoverPhoto.removeChild(para);
}
