javascript onClick event not fire

[magic-thomas]

It is very simple test.

When I click stop button with this code.

<script>
    import { onMount } from "svelte";
    onMount(async () => {
        function test(){
            console.log('test')
        }
    });
</script>

<button onClick="stop" class="bg-green-400 p-2">stop</button> 

It shows error.

Uncaught ReferenceError: test is not defined

But if I try with this code,

<script>
    import { onMount } from "svelte";
    onMount(async () => {
        function test(){
            console.log('test')
        }
        document.querySelector('button').addEventListener('click', test);
    });
</script>

<button class="bg-green-400 p-2">stop</button>

It works fine.

I have no idea why it is discriminated.

I use page options as like this in ./src/routes/+layout.server.js

export const ssr = true;
export const prerender = true;
export const trailingSlash = 'always';

Is these option related with this phenomenon?

Can someone explain why or point out where this discrimination is explained in documents ?

Is Javascript events ( onClick .. ) not allowed in sveltekit ?

[geoffrich]

You should write it like this:

<script>
        function test(){
            console.log('test')
        }
</script>

<button on:click={test} class="bg-green-400 p-2">stop</button> 

• you shouldn't declare your test function in onMount, it should just be at the top of the script tag
• svelte doesn't use onClick, it uses on:click
• you need to wrap the event handler in curly brackets, e.g. on:click={test}

I highly recommend going through the event handling section of the tutorial - it seems like you're missing some of the concepts there.

[magic-thomas]

hi.

But if I handle with DOM without onMount it cause problem.

See below which a part of actual code.

<script>
    import { onMount } from "svelte";

    setInterval(() => {
        console.log('setInterval' , new Date().toLocaleTimeString())
        addDiv();
    }, 2000);

    function addDiv(){
        let demo  = document.querySelector('#demo');
        let div = document.createElement('div');
        div.innerHTML = new Date().toLocaleDateString();
        demo.appendChild(div);
    }
</script>

<div id="demo" class=""></div>

It gives error on terminal.

/src/routes/+page.svelte:11
	let demo = document.querySelector('#demo');
	           ^

ReferenceError: document is not defined

And those code works fine inside onMount .

I am developing videojs plugin and it needs setInterval and DOM manipulation.

So I wonder if all javascript events ( onClick ) should be handled inside onMount, and if I should keep this in mind.

[ioucyf]

try this:

<script>
    import { onMount } from "svelte";
+   import {browser} from '$app/environment';

    setInterval(() => {
        console.log('setInterval' , new Date().toLocaleTimeString())
        addDiv();
    }, 2000);

    function addDiv(){
+       if (!browser) return;
        let demo  = document.querySelector('#demo');
        let div = document.createElement('div');
        div.innerHTML = new Date().toLocaleDateString();
        demo.appendChild(div);
    }
</script>

<div id="demo" class=""></div>

or even better:

<script>
   import { onMount, onDestroy } from "svelte";
   import {browser} from '$app/environment';
   let interval = null;

   onMount(() => {
       interval =  setInterval(() => {
         console.log('setInterval' , new Date().toLocaleTimeString())
         addDiv();
       }, 2000);
   }

   onDestroy(() => {
     if (interval) clearInterval(interval);
   }

   

    function addDiv(){
      if (!browser) return;  // this may now be unnecessary
      let demo  = document.querySelector('#demo');
      let div = document.createElement('div');
      div.innerHTML = new Date().toLocaleDateString();
      demo.appendChild(div);
    }
</script>

<div id="demo" class=""></div>

the problem in the original code is that setInterval() is being called in the server (node/deno); in an environment where the Browser API does not exist. When the interval timer starts, it runs the addDiv(), which attempts to call querySelector() on the a document object that does not exist in the server. when you call it inside onMount(), the function then is called in the browser's environment and that's why it then works.

if you're calling or accessing Browser API directly in <script> you can just import {browser} from '$app/environment' then add the condition if (browser) { // do stuff } to prevent errors.

[magic-thomas]

Thanks for explain.

[geoffrich]

You should avoid using document.querySelector for DOM manipulation in your Svelte components and use Svelte's template syntax instead, if possible. Your example can be rewritten to the following:

<script>
	import { onMount } from "svelte";
	
	// store the list of dates in a state variable
	let dates = [new Date().toLocaleDateString()];
	
	onMount(() => {
		// set up the interval in onMount
		const interval = setInterval(() => {
			// add a new date every 2 seconds
			dates.push(new Date().toLocaleDateString());
			// reassign dates so Svelte knows something changed
			dates = dates;
		}, 2000);

		// make sure to clear the interval when the component is destroyed
		return () => {
			clearInterval(interval);
		}
	})
</script>

<div id="demo" class="">
	<!-- iterate over the list of dates and render a div for each one -->
	{#each dates as date}
	<div>
		{date}
	</div>
	{/each}
</div>

Your actual use case could require direct DOM manipulation, depending on complexity. In that case, you still probably want to use bind:this instead of document.querySelector, since document.querySelector could inadvertently retrieve an element outside of the current component.