# JSXGraph 1.7.0 Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.PrefixParser
- JXG.Server
- JXG.Server.modules
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML
- Label
- Legend
- Line
- Line3D
- Locus
- MajorArc
- MajorSector
- Measurement
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

# Class Input

JXG.GeometryElement,JXG.CoordsElement
↳ JXG.Text
↳ Text
↳ Input

This element is used to provide a constructor for special texts containing a HTML form input element.

If the width of element is set with the attribute "cssStyle", the width of the label must be added.

For this element, the attribute "display" has to have the value 'html' (which is the default).

The underlying HTML input field can be accessed through the sub-object 'rendNodeInput', e.g. to add event listeners.
Defined in: input.js.
Extends Text.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Input(x,y,value,label)

Fields borrowed from class Text:
  anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, intl, isLabel, katexMacros, parse, rotate, snapSizeX, snapSizeY, useASCIIMathML, useCaja, useKatex, useMathJax, visible
Fields borrowed from class JXG.Text:
  size
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, viewport, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
  coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Field Summary
Field Attributes | Field Name and Description
--- | ---
| disabled Control the attribute "disabled" of the HTML input field.
| maxlength Control the attribute "maxlength" of the HTML input field.

Fields borrowed from class Text:
  anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, intl, isLabel, katexMacros, parse, rotate, snapSizeX, snapSizeY, useASCIIMathML, useCaja, useKatex, useMathJax, visible
Fields borrowed from class JXG.Text:
  size
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, viewport, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
  coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Method Summary
Method Attributes | Method Name and Description
--- | ---
| set(val) Sets value of the input element.
| Value() Returns the value (content) of the input element

Methods borrowed from class JXG.Text:
  _createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Methods borrowed from class JXG.CoordsElement:
  _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Class Detail
Input(x,y,value,label)

Parameters:
{number|function_number|function_String_String|function} x,y,value,label
  Parent elements for input elements.

  x and y are the coordinates of the lower left corner of the text box. The position of the text is fixed, x and y are numbers. The position is variable if x or y are functions.

  The default value of the input element must be given as string.

  The label of the input element may be given as string or function.

Examples:

     // Create an input element at position [1,4].
     var input = board.create('input', [0, 1, 'sin(x)*x', 'f(x)='], {cssStyle: 'width: 100px'});
     var f = board.jc.snippet(input.Value(), true, 'x', false);
     var graph = board.create('functiongraph',[f,
             function() {
               var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
               return c.usrCoords[1];
             },
             function() {
               var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
               return c.usrCoords[1];
             }
           ]);

     board.create('text', [1, 3, '<button onclick="updateGraph()">Update graph</button>']);

     var updateGraph = function() {
         graph.Y = board.jc.snippet(input.Value(), true, 'x', false);
         graph.updateCurve();
         board.update();
     }

    // Add the `keyup` event to an input field
    var A = board.create('point', [3, -2]);
    var i = board.create('input', [-4, -4, "1", "x "]);

    i.rendNodeInput.addEventListener("keyup", ( function () {
       var x = parseFloat(this.value);
       if (!isNaN(x)) {
    	   A.moveTo([x, 3], 100);
       }
    }));

    // Add the `change` event to an input field
    var A = board.create('point', [3, -2]);
    var i = board.create('input', [-4, -4, "1", "x "]);

    i.rendNodeInput.addEventListener("change", ( function () {
       var x = parseFloat(i.Value());
       A.moveTo([x, 2], 100);
    }));

      Apply CSS classes to label and input tag
        <style>
            div.JXGtext_inp {
                font-weight: bold;
            }

            // Label
            div.JXGtext_inp > span > span {
                padding: 3px;
            }

            // Input field
            div.JXGtext_inp > span > input {
                width: 100px;
                border: solid 4px red;
                border-radius: 25px;
            }
        </style>

    var inp = board.create('input', [-6, 1, 'x', 'y'], {
         CssClass: 'JXGtext_inp', HighlightCssClass: 'JXGtext_inp'
    });

Field Detail
{Boolean} disabled
Control the attribute "disabled" of the HTML input field.
Defined in: options.js.

Default Value:
  false

{Number} maxlength
Control the attribute "maxlength" of the HTML input field.
Defined in: options.js.

Default Value:
  524288 (as in HTML)

Method Detail
{JXG.GeometryElement} set(val)
Sets value of the input element.

Parameters:
{String} val

Returns:
  {JXG.GeometryElement} Reference to the element.

Examples:

            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:400px'});

{String} Value()
Returns the value (content) of the input element

Returns:
  {String} content of the input field.

Documentation generated by JsDoc Toolkit 2.4.0 on Wed Feb 14 2024 15:53:28 GMT+0100 (heure normale d’Europe centrale)