JSXGraph logo
JSXGraph
JSXGraph share

Share

Adding JSXGraph events
QR code
<iframe
src="https://jsxgraph.uni-bayreuth.de/share/iframe/adding-jsxgraph-events"
style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;"
name="JSXGraph example: Adding JSXGraph events"
allowfullscreen
></iframe>
This code has to
<p id="myOutput"> </p>
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>
<script type = "text/javascript">
/*
This example is licensed under a
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
Please note you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const BOARDID = 'board-0';
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-4, 4, 4, -4],
keepaspectratio: true
});
var p = board.create('point', [1, 1], {
size: 5,
fixed: true
});
p.on('over', (e) => {
document.getElementById('myOutput').innerHTML = "Point " + p.name;
});
p.on('out', (e) => {
document.getElementById('myOutput').innerHTML = ' ';
});
var p2 = board.create('point', [-1, 1], {
size: 5
});
p2.on('over', function(e) {
document.getElementById('myOutput').innerHTML = "Point " + this.name;
});
p2.on('out', function(e) {
document.getElementById('myOutput').innerHTML = ' ';
});
</script>
/*
This example is licensed under a
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/
Please note you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const BOARDID = 'your_div_id'; // Insert your id here!
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-4, 4, 4, -4],
keepaspectratio: true
});
var p = board.create('point', [1, 1], {
size: 5,
fixed: true
});
p.on('over', (e) => {
document.getElementById('myOutput').innerHTML = "Point " + p.name;
});
p.on('out', (e) => {
document.getElementById('myOutput').innerHTML = ' ';
});
var p2 = board.create('point', [-1, 1], {
size: 5
});
p2.on('over', function(e) {
document.getElementById('myOutput').innerHTML = "Point " + this.name;
});
p2.on('out', function(e) {
document.getElementById('myOutput').innerHTML = ' ';
});

Adding JSXGraph events

It is possible to supply user-defined defined functions for certain events. The user-defined functions are called additionally to the default JSXGraph events. For the events down and up the user-supplied event handlers are called before the default JSXGraph event handler. For the event update the user-supplied handler is called after the default JSXGraph event handler which is an update of the board.

A user-supplied event handler can be defined by the method on:

var p = board.create('point',[1,1]);
p.on('update', function(e) { /* do something ... */);

The possible events are listed in the API docs for elements, see Event Summary and board, see Event Summary.

As of version 1.5.0, it is only possible to access the element via this if the event listener is supplied as regular JavaScript function and not as arrow function.

 

JSXGraph v1.11.1 Copyright (C) see https://jsxgraph.org
0,0
–o+←↓↑→
A
B
<p id="myOutput"> </p>
// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-4, 4, 4, -4],
keepaspectratio: true
});
var p = board.create('point', [1, 1], {
size: 5,
fixed: true
});
p.on('over', (e) => {
document.getElementById('myOutput').innerHTML = "Point " + p.name;
});
p.on('out', (e) => {
document.getElementById('myOutput').innerHTML = ' ';
});
var p2 = board.create('point', [-1, 1], {
size: 5
});
p2.on('over', function(e) {
document.getElementById('myOutput').innerHTML = "Point " + this.name;
});
p2.on('out', function(e) {
document.getElementById('myOutput').innerHTML = ' ';
});

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.