Astro doesnt work when navigate

[gloomy sigil]

When refresh the page work but, when i navigate doesnt work
Can you solve my problem?

<script is:inline>
document.addEventListener('astro:page-load', ()=>{
const addCameraBtn = document.getElementById("add_camera_btn")
camerasContainer = document.getElementById('cameras_container')
class AddCamera extends HTMLElement {    constructor(index) {
super();
this.innerHTML = `
<hr class="md:hidden"><div class="flex flex-wrap mb-2 justify-between">
<label>Nombre cancha
<input placeholder="Cancha" name="cameras[${index}][field_name]" type="text" required class="bg-white w-full border-primary border-2 outline-0 px-4 py-1 md:py-3 text-black rounded-xl placeholder-terciary disabled:border-primary_disabled"></input>
</label></div>
`;
}
}
customElements.define('add-camera-container', AddCamera);
let cameraIndex = 0;
const addCamera = new AddCamera(cameraIndex);        camerasContainer.insertBefore(addCamera, removeCameraBtn);            addCameraBtn.addEventListener('click', function() {
const addCamera = new AddCamera(cameraIndex++);
camerasContainer.insertBefore(addCamera, removeCameraBtn);            removeCameraBtn.classList.remove('hidden')
})
},{once:true})
    </script>

[worthy arrow]

Hi @gloomy sigil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro has a specific way of handling scripts when navigating between pages. When using view transitions, you need to rerun the scripts on page changes. This is because, during client-side routing, a new page is displayed without a full-page browser refresh. This is a feature of single-page application (SPA) sites, where your entire site or app is “one page” of JavaScript whose content is updated based on visitor interaction.

In your case, you are using the astro:page-load event to run your script once. This event fires at the end of page navigation, after the new page is visible to the user and blocking styles and scripts are loaded. However, you have set the once option to true, which means the event listener will only run once and then be removed.

To solve your issue, you should remove the {once: true} option from your event listener. This will allow the script to run every time you navigate to a new page. Here's how you can modify your code:

<script is:inline>
document.addEventListener('astro:page-load', ()=>{
    const addCameraBtn = document.getElementById("add_camera_btn")
    camerasContainer = document.getElementById('cameras_container')
    class AddCamera extends HTMLElement {    
        constructor(index) {
            super();
            this.innerHTML = `
            <hr class="md:hidden"><div class="flex flex-wrap mb-2 justify-between">
            <label>Nombre cancha
            <input placeholder="Cancha" name="cameras[${index}][field_name]" type="text" required class="bg-white w-full border-primary border-2 outline-0 px-4 py-1 md:py-3 text-black rounded-xl placeholder-terciary disabled:border-primary_disabled"></input>
            </label></div>
            `;
        }
    }
    customElements.define('add-camera-container', AddCamera);
    let cameraIndex = 0;
    const addCamera = new AddCamera(cameraIndex);        
    camerasContainer.insertBefore(addCamera, removeCameraBtn);            
    addCameraBtn.addEventListener('click', function() {
        const addCamera = new AddCamera(cameraIndex++);
        camerasContainer.insertBefore(addCamera, removeCameraBtn);            
        removeCameraBtn.classList.remove('hidden')
    })
})
</script>

For more information, you can refer to the Astro documentation on view transitions (https://docs.astro.build/en/guides/view-transitions/#script-behavior-during-page-navigation) and the Astro documentation on the astro:page-load event (https://docs.astro.build/en/guides/view-transitions/#astropage-load).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@gloomy sigil kapa.ai is still learning and improving, please let us know how it did by reacting below

[gloomy sigil]

@worthy arrow that no solve my problem

[worthy arrow]

Let me check the knowledge base for you. One moment! :books:

---

I'm sorry to hear that the previous solution didn't solve your problem. Unfortunately, without more specific information about the issue you're experiencing, it's difficult to provide a more targeted solution.

Astro's behavior with scripts and navigation can be complex, and there could be several reasons why your script isn't working as expected. It could be related to the way Astro handles JavaScript, the specific script you're using, or even something else entirely.

If you're still having trouble, I would recommend checking out the Astro GitHub issues (https://github.com/withastro/astro/issues/) to see if anyone else has encountered a similar problem. You can also ask for help in the Astro Discord community (https://astro.build/chat) in the #support channel.

For more detailed guidance on how Astro handles scripts, you can refer to the Astro documentation (https://docs.astro.build/en/guides/troubleshooting/#common-error-messages).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: