1

[GopherJS] this Keyword

 2 years ago
source link: http://siongui.github.io/2016/06/02/gopherjs-use-this-keyword/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[GopherJS] this Keyword

June 02, 2016

Show how to access/use this keyword via GopherJS.

In the following demo, move mouse on the word, and the color of the word will become red.

Demo

Source code: use MakeFunc to use this keyword.

index.html | repository | view raw 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>GopherJS Access this Keyword Demo</title>
</head>
<body>

<div id="container">
  <span>Manopubbaṅgamā</span> <span>dhammā</span>, <span>manoseṭṭhā</span>
  <span>manomayā</span>; <span>Manasā</span> <span>ce</span>
  <span>paduṭṭhena</span>, <span>bhāsati</span> <span>vā</span>
  <span>karoti</span> <span>vā</span>; <span>Tato</span> <span>naṃ</span>
  <span>dukkhamanveti</span>, <span>cakkaṃva</span> <span>vahato</span>
  <span>padaṃ</span>.
</div>

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

app.go | repository | view raw 

package main

import (
	"github.com/gopherjs/gopherjs/js"
)

var onWordMouseOver = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
	this.Get("style").Set("color", "red")
	return nil
})

var onWordMouseOut = js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
	this.Get("style").Set("color", "")
	return nil
})

func main() {
	spans := js.Global.Get("document").Call("getElementById", "container").Call("querySelectorAll", "span")
	// access individual span
	length := spans.Get("length").Int()
	for i := 0; i < length; i++ {
		span := spans.Call("item", i)
		span.Set("onmouseover", onWordMouseOver)
		span.Set("onmouseout", onWordMouseOut)
	}
}

References:

[2]GitHub - siongui/gopherjs-tooltip: Tooltip in Go. Compiled to JavaScript via GopherJS


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK