WASM and DOM

Learn to access the DOM with the js package.

WASM and the DOM

The syscall/js package accesses JavaScript objects from Go. js.Global() is the browser's window object:

doc := js.Global().Get("document")
el := doc.Call("getElementById", "sonuc")
el.Set("textContent", "Go'dan merhaba")

To make a Go function callable from JS use js.FuncOf; to keep the program alive, main ends with select {}.

Events with js.FuncOf

Running Go code when a button is clicked:

topla := js.FuncOf(func(this js.Value, args []js.Value) any {
    return args[0].Int() + args[1].Int()
})
js.Global().Set("goTopla", topla)
// JavaScript: goTopla(2, 3) → 5

Call Release() when a js.Func is no longer needed, otherwise it stays in memory. Every call between Go and JS is costly; avoid frequent crossings.

Exercise Callback signature

Since syscall/js only compiles for WASM, imitate the signature: write type Deger struct{ n int } and func topla(args []Deger) any that adds the n of the first two arguments. Print topla([]Deger{{2}, {3}}).

Show example solution

package main

import "fmt"

type Deger struct{ n int }

func topla(args []Deger) any {
    return args[0].n + args[1].n
}

func main() {
    fmt.Println(topla([]Deger{{2}, {3}}))
}

Test yourself

Why does a Go WASM program end with <code>select {}</code>?
- To load the DOM
- If main returns the program exits and Go functions given to JS stop working
- To improve performance
- To catch errors
Show answer

If main returns the program exits and Go functions given to JS stop working — select {} waits forever, so the runtime stays alive and event callbacks are handled.

Call a JS method

el := js.Global().Get("document").____("getElementById", "kutu")

Show answer

el := js.Global().Get("document").Call("getElementById", "kutu")

syscall/js

js.Global()

The window object
Get

Reads a property
Set

Writes a property
js.FuncOf

Exposes a Go function to JS

Next lesson: Embedded Go

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies