How do I load only certain js files from a specific html.erb?

[sandonemaki]

I am a beginner.
I am writing JS in Rails.

Since I am loading JS files from application.html.erb, I cannot load a specific JS file only in a specific html.erb.

I am writing the JS in such a way that once there is an if statement in the JS, if there is a necessary element, the process will continue.

Is there any way to load a specific JS only from a specific html.erb, like the general front writing style, like just before the body tag?
How can I load a specific js file from a specific html.erb?

Example
I want index.html.erb to load only index.js.
I don't want unindex.html.erb to load index.js.

[ElMassimo]

Hi there!

Although the guide uses tag helpers in application.html.erb because that's the most common, you can instead use them inside views to load scripts as needed.

For example, in index.html.erb:

<%= vite_javascript_tag "index" %>

will render a script tag, which would load entrypoints/index.js.

[sandonemaki]

@ElMassimo
Thank you very much.
However, the method you gave me did not solve the problem.

I want to use fetch to access the controller when I click on the button above.

File: endpoint/js/get.js
Without importing to endpoint/application.js

In index.html.erb
<%= vite_javascript_tag "js/get" %>
in index.html.erb, I no longer get the error that addEventListene is null, but I can no longer access the controller using fetch.
The console.log is also not output.

I am attaching here the expected display image and the code that I modified with your instructions.

Please help me.
Thank you in advance for your help.

---

Expected images
If I write import '@/entrypoints/js/get.js' in endpoint/application.js, it shows up

Do not write in endpoints/application.js.
Write <%= vite_javascript_tag "js/get" %> in index.html.erb
It does not display as expected.

entrypoint/js/get.js

document.addEventListener("DOMContentLoaded", function(event) {
  const buttonGet = document.getElementById('button_get_js');
   // if (buttonGet) {
    buttonGet.addEventListener('click', function(){
      fetch('/get_post', {
        method: 'GET'
      })
        .then(function(response){
          const response_message = response.status + ':' + response.statusText
          console.log(response_message);
          window.alert('response_message=' + response_message);
        });
    });
 // }

  const buttonPost = document.getElementById('button_post_js');
  // if (buttonPost) {
    buttonPost.addEventListener('click', function(){
      console.log("AAAAAAAAAA") <--- No output
      const post_data = {
        key1: "data1",
        key2: "data2",
        key3: 3
      };

      fetch('/get_post', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': getCsrfToken()
        },
        body: JSON.stringify(post_data),
      })
        .then(function(response){
          const response_message = response.status + ':' + response.statusText
          console.log(response_message);
          window.alert('response_message=' + response_message);
        });
    });
  // }
  const getCsrfToken = () => {
    const metas = document.getElementsByTagName('meta');
    console.log(metas);
    for (let meta of metas) {
      if (meta.getAttribute('name') === 'csrf-token') {
        console.log('csrf-token:', meta.getAttribute('content'));
        return meta.getAttribute('content');
      }
    }
    return '';
  }
});

views/layouts/application.html.erb

    <%= vite_javascript_tag 'application' %>
    <%= vite_stylesheet_tag 'application.css' %>

views/home/index.html.erb

<h1>Home#get_post</h1>
<p>Find me in app/views/home/get_post.html.erb</p>
<button type="button" id="button_get_js">Fetch API : GET</button>
<button type="button" id="button_post_js">Fetch API : POST</button>
<%= vite_javascript_tag "js/get" %>

[ElMassimo]

If I understood correctly, the problem is buttonPost is null when you add the script in the page.

Before adding click listeners, you'll want to wait for DOMContentLoaded. Try:

document.addEventListener('DOMContentLoaded', (event) => {
  const buttonPost = document.getElementById('button_post_js')
  console.log({ buttonPost })
})

[sandonemaki]

@ElMassimo
That has already been addressed.
But the problem has not been solved.
The code I copied was partial, so I re-pasted it into the code above.
The DOMContentLoaded was turned on before I posted the second question.

Please help me.
Thank you in advance for your help.