Sometimes you need to update elements client side without having to do a network call. For this you generally have to target an element with javascript and set an attribute, change the innerHTML, etc.
To make this work while still keeping a pure go feel, we offer a few utility methods to execute various javascript on an element.
**Example:** When the form is submitted, set the button text to submitting and disable it, and vise versa after submit is done.
```go
func MyForm() *h.Element {
return h.Form(
h.Button(
h.Text("Submit"),
h.HxBeforeRequest(
js.SetDisabled(true),
js.SetText("Submitting..."),
),
h.HxAfterRequest(
js.SetDisabled(false),
js.SetText("Submit"),
),
),
)
}
```
The structure of this comes down to:
1. Add an event handler to the element
2. Add commands (found in the **js** package) as children to that event handler
If you use the OnEvent directly, event names may be any [HTML DOM](https://www.w3schools.com/jsref/dom_obj_event.asp) events, or any [HTMX events](https://htmx.org/events/).
Commands:
```go
js.AddAttribute(string, value)
js.RemoveAttribute(string)
js.AddClass(string, value)
js.SetText(string)
js.Increment(count)
js.SetInnerHtml(Ren)
js.SetOuterHtml(Ren)
js.SetDisabled(bool)
js.RemoveClass(string)
js.Alert(string)
js.EvalJs(string) // eval arbitrary js, use 'self' to get the current element as a reference
tip: If you are using Jetbrains IDE's, you can write `// language=js` as a comment above the function call (h.EvalJS) and it will automatically give you syntax highlighting on the raw JS.
