Make HTML Event Attributes Work like onclick

[jdgamble555]

Body

Summary

You cannot use onclick or other attributes in a pure .astro file. You have to manually create event listeners and unsubscribe to them.

Background & Motivation

Regular JS doesn't even work as you would expect in a .astro file.

It requires 2x as much code. Pure HTML doesn't require this.

Goals

A concise, bulleted-list outlining the intended goals of this RFC.

• onclick in pure html does not work
• allow all events to be matched to functions in script tags
• astro VS Code would also need to be updated to reflect this

Example

<button onclick="increment()">increment</button>
<script>
function increment() {
  // increment
}
</script>

This is so much more work than adding event listener and removing it. This is how pure html is supposed to work.

J

[delucis]

A regular <script> tag in Astro is bundled and shipped as a script with type="module". This helps optimise page loads and script execution, but means that any variables and functions declared in the script are not assigned to the global scope (modules are supposed to import/export things instead).

When you use onclick and other similar attributes, the function call looks for stuff in the global scope, so in your example there is no increment() for the button to call.

If you need this, you can explicitly assign the function to the global scope:

<button onclick="handleClick()">Click</button>
<script>
	window.handleClick = function handleClick() {
		alert('Wow! You clicked me.');
	}
</script>

Alternatively, you can use <script is:inline> to opt out of Astro’s module bundling, but I wouldn’t really recommend that if you can avoid it.

[jdgamble555]

Ok that worked, thanks! I would think there would be an easier way to do this. Perhaps astro should automatically convert functions inside html events to be able to be put in tags or something...