[Golang] GopherJS DOM Example - Hide Element by display:none

Introduction

It is really cool to run Go code in the browser. GopherJS is a compiler from Go to JavaScript, which makes this possible. In this post, we will give a simple example of DOM manipulation in Go program. This example shows how to hide HTML elements by setting CSS property display:none. If you are not familiar with basic DOM manipulation in Go, read the posts in GopherJS DOM Example series first.

Install GopherJS and DOM bindings

Run the following command to install GopherJS and GopherJS bindings for the JavaScript DOM APIs:

$ go get -u github.com/gopherjs/gopherjs
$ go get -u honnef.co/go/js/dom

Source Code

First we write a simple HTML for our demo:

index.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!doctype html>
<html>
<head>
  <title>GopherJS DOM example - Hide Element by display:none</title>
</head>
<body>

<div id="foo">Click me to hide me</div>

<script src="demo.js"></script>
</body>
</html>

We will bind a onclick event handler to the div element whose id is foo. When users click the div element, the display property of the div element is set to none, which hides the div element.

hide.go | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
package main

import "honnef.co/go/js/dom"

func main() {
	d := dom.GetWindow().Document()

	foo := d.GetElementByID("foo").(*dom.HTMLDivElement)
	foo.AddEventListener("click", false, func(event dom.Event) {
		foo.Style().SetProperty("display", "none", "")
	})
}

Note that to call Style(), we must assert the type of foo to HTMLDivElement. Compile the Go code to JavaScript by:

$ gopherjs build hide.go -o demo.js

Put demo.js together with the index.html in the same directory and open the index.html with your browser. Click the text and it will disappear!

Tested on: Ubuntu Linux 15.10, Go 1.5.2.

Powered by Github Pages, Pelican, pyScss.