Usage (signatures)
board.create('button', [x, y, label, handleropt]);
x and y are the coordinates of the lower left corner of the text box.
The position of the text is fixed,
if x and y are numbers. The position is variable if x or y are functions.
The label of the input element may be given as string.
The (optional) handler function which is called when the button is pressed.
Parameters
| Name | Type | Attributes | Description |
|---|---|---|---|
x |
NumberLike | ||
y |
NumberLike | ||
label |
String | function | ||
handler |
function |
<optional> |
Examples
Create buttons
var p = board.create('point', [0.5, 0.5], {id: 'p1'});
// Create a button element at position [1,2].
var button1 = board.create('button', [1, 2, 'Change Y with JavaScript', function() {
p.moveTo([p.X(), p.Y() + 0.5], 100);
}], {});
// Create a button element at position [1,4].
var button2 = board.create('button', [1, 4, 'Change Y with JessieCode',
"$('p1').Y = $('p1').Y() - 0.5;"
], {});
A toggle button
var butt = board.create('button', [-2, -2, 'Off', function() {
var txt;
butt.value = !butt.value;
if (butt.value) {
txt = 'On';
} else {
txt = 'Off';
}
butt.rendNodeButton.innerHTML = txt;
}]);
// Set initial value for the button
if (!JXG.exists(butt.value)) {
butt.value = false;
}
var p = board.create('point', [2, -2], {
visible: () => butt.value
});
Change texts on button click
var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
var b1 = board.create('button', [-3, -1, 'Change texts', function () {
i1.setText('g(x)');
i1.set('cos(x)');
c1.setText('label 2');
b1.setText('Texts are changed');
}],
{cssStyle: 'width:200px'});
Set the CSS class of a button
// CSS:
<style>
.mybutton > button {
background-color: #04AA6D;
border: none;
color: white;
padding: 1px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
// JavaScript:
var button = board.create('button',
[1, 4, 'answers', function () {}],
{cssClass:'mybutton', highlightCssClass: 'mybutton'});
Attributes
Own
disabled
- Description
Control the attribute "disabled" of the HTML button.
- Type
- Boolean
- Default Value
- false
- Source
- options.js, line 4772
Inherited
Members
Own
none
Inherited
Events
Own
none