Checkbox in JSXGraph

36 views
Skip to first unread message

Per Henrik Hogstad

unread,
Nov 26, 2021, 5:17:47 AM11/26/21
to JSXGraph
How can I get immediate respons when I check/uncheck a checkbox in JSXGraph?

I try:
cb_D = board.create('checkbox', [20,5, '<checkbox onclick="act_cbDeriv()">Deriv</checkbox>'],{checked:true})

but it does not work.
The checkbox is checked, but no action of the onclick function.
addEvent is not a solution either.
onclick is okay in a button, but not in a checkbox

Cleon Teunissen

unread,
Nov 27, 2021, 6:47:11 AM11/27/21
to jsxg...@googlegroups.com
Per Henrik Hogstad wrote:
> How can I get immediate response when I check/uncheck a checkbox in JSXGraph?

I recommend that you create a minimal example in the JSFiddle environment.
The JSXGraph developers have created this template:
https://jsfiddle.net/k60dprL4/

Recommendation: create a JSFiddle account, fork the template, and
create a minimal example.

Implement the code for checkbox-with-event that is in the documentation:
https://jsxgraph.org/docs/symbols/Checkbox.html

(I verified that the code from the documentation runs in the JSFiddle
environment: https://jsfiddle.net/Cleonis/8czLj6r2/ )

In your fork change the code towards the usage that you are looking for.
If you cannot get it to work as intended: provide a link to your
JSFiddle attempt: there is a good chance the developers can take it
from there.

Conversely, stating 'addEvent is not a solution either', does not give
the developers any starting point.

Alfred Wassermann

unread,
Nov 29, 2021, 6:27:05 AM11/29/21
to JSXGraph
Cleonis is right. A jsfiddle as starting point would be very helpful!
Nevertheless, here is a version which might by point in the direction you want.
I would advise to use a text element and create an HTML checkbox in this text.
Handling clicks is then done with the usual HTML onchange event:

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5], axis:true
});

function test() {
  alert('check');
}

var cb_D = board.create('text', [-4, 2, '<input type="checkbox" checked onChange="test()">Deriv']);


Best wishes,
Alfred


Reply all
Reply to author
Forward
0 new messages