It doesn't respond to the description in .js of the packs file

【Overview】

1. Conclusion </ b>

2. How to use </ b>

3. Why didn't you write to the js file </ b>

4. What I learned from here </ b>

  1. Conclusion

Write "script" directly in the html.erb file and write the javascript language in the script </ b>!

  1. How to use

In any html.erb

ruby:****.html.erb


<script>
.
.
.

</script>

Just write Javascript! Note that in application.html.erb If you are applying the header footer using <% = yiled%>, pay attention to the order in which they are reflected. If you apply Javascript before the HTML is loaded, you will get an error in the console of the browser verification tool.


3. Why didn't you write to the js file

In conclusion, it didn't read the js file, or it didn't read unless I reloaded it once. As for the content, the password was displayed and hidden, but since it appears a lot when searching, I will omit it here.

Rails6.0 Vscode using.

app/javascript/packs/application.js


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./security")　#➡︎ Applicable file

And describe the javascript language in secrurity.js,

ruby:app/layouts/application.html.erb


<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%=　javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Since it is described, I thought that the js file should be applied, but it was not reflected at all.

Also, I programmed the display / non-display of the password in the js file, but there was no response, so I referred to it in various ways. The following programs are listed first.

app/javascript/packs/security.js


document.addEventListener("DOMContentLoaded", function(){}

I was able to show and hide the password, but it was not reflected until I pressed reload once. So I haven't solved the js file problem, but I'm okay because I was able to do what I wanted to do for the time being. (Readability is not good)


4. What I learned from here

In this error, I learned a lot about the reading order of html / css / javascript / and at what stage the DOM is formed. I haven't learned enough about tutbolinks and documentloaded, but it's quite big that I could grasp the flow alone. It was thanks to knowing the writing order that I solved it as soon as I made it into a script.

Referenced URL " I examined the processing around DOMContentLoaded in detail " "[JS] Please tell me why addEventListener does not work" " Difference between DOMContentLoaded event and load event [Timing] "

Recommended Posts