HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy

CesiumJS
1

I am getting an error that says: HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy. I am using Sandcastle in Firefox if that helps at all. I am a beginner and not sure what I am doing wrong. Please help. My code looks like this:

require([
‘Cesium’, ‘Widgets/Dojo/CesiumViewerWidget’, ‘dijit/form/Button’,‘dijit/form/NumberTextBox’
], function(
Cesium, CesiumViewerWidget, Button, NumberTextBox)
{
“use strict”;

var LatBox;
var LonBox;
var gallery = '../../CesiumViewer/Gallery/';

////////////////////////////////**************************************************************
//***************************************************************************************

function addPointBillboards(scene, ellipsoid) {
    Sandcastle.declare(addPointBillboards);
    var primitives = scene.getPrimitives();
    var canvas = document.createElement('canvas');
    canvas.width = 16;
    canvas.height = 16;
    var context2D = canvas.getContext('2d');
    context2D.beginPath();
    context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
    context2D.closePath();
    context2D.fillStyle = 'rgb(255, 255, 255)';
    context2D.fill();

    var billboards = new Cesium.BillboardCollection();
    var textureAtlas = scene.getContext().createTextureAtlas({
        image : canvas
    });
    billboards.setTextureAtlas(textureAtlas);

    billboards.add({
        position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.59777, 40.03883)),
        color : Cesium.Color.RED,
        scale : 0.5,
        imageIndex : 0
    });

    scene.getPrimitives().add(billboards);
}

//**********************************************************************************
//*****************************************************************************

function czmlClear(widget) {
    Sandcastle.declare(czmlClear);    // For highlighting in Sandcastle.
    widget.removeAllCzml();
    widget.viewHome();
}
   
function czmlSatellites(widget) {
    Sandcastle.declare(czmlSatellites);    // For highlighting in Sandcastle.
    widget.removeAllCzml();
    widget.viewHome();
    widget.loadCzml(gallery + 'simple.czml');
}

function czmlSensors(widget) {
    Sandcastle.declare(czmlSensors);    // For highlighting in Sandcastle.
    widget.removeAllCzml();
    widget.viewHome();
    widget.loadCzml(gallery + 'LotsOfSensors.czml');
}

function czmlVehicle(widget) {
    Sandcastle.declare(czmlVehicle);    // For highlighting in Sandcastle.
    widget.removeAllCzml();
    widget.loadCzml(gallery + 'Vehicle.czml', 'Vehicle');
}


function createTextBoxInterface() {
    LatBox = new NumberTextBox({
        name: "LatBox",
      constraints: {pattern: "0.######"}
}, "LatBox");
    LatBox.placeAt('LatBox');

}

function createTextBoxInterface2() {

 LonBox = new NumberTextBox({
        name: "LonBox",
      constraints: {pattern: "0.######"}
}, "LonBox");
    LonBox.placeAt('LonBox');
}


function createButtons(widget) {
    var ellipsoid = widget.ellipsoid;
    var scene = widget.scene;
    var primitives = scene.getPrimitives();
  

    new Button({
        label : 'Add point billboards',
        onClick : function() {
            primitives.removeAll();
            addPointBillboards(scene, ellipsoid);
            Sandcastle.highlight(addPointBillboards);
        }
    }).placeAt('toolbar2');

    new Button({
        label : 'Delete point billboards',
        onClick : function() {
            primitives.removeAll();
            //Sandcastle.highlight(addPointBillboards);
        }
    }).placeAt('toolbar2');

   
    new Button({
        label: 'Clear CZML',
        onClick: function() {
            czmlClear(widget);
            Sandcastle.highlight(czmlClear);
        }
    }).placeAt('toolbar');
   
   
    new Button({
        label: 'Satellites',
        onClick: function() {
            czmlSatellites(widget);
            Sandcastle.highlight(czmlSatellites);
        }
    }).placeAt('toolbar');

    new Button({
        label: 'Sensors',
        onClick: function() {
            czmlSensors(widget);
            Sandcastle.highlight(czmlSensors);
        }
    }).placeAt('toolbar');

}

// Initialize a viewer capable of drag-and-drop
// and user customizations.
var widget = new CesiumViewerWidget({
    enableDragDrop : true
});
widget.placeAt('cesiumContainer');
widget.startup();

addPointBillboards(widget.scene, widget.ellipsoid);
createButtons(widget);
createTextBoxInterface();
createTextBoxInterface2();

Sandcastle.finishedLoading();

    });
2

The problem is the calls to placeAt for your LatBox and LonBox. Try
removing both of them.

LatBox.placeAt('LatBox');
LonBox.placeAt('LonBox');

Basically, passing "LatBox" to the NumberTextBox constructor means "turn an
existing DOM element into a NumberTextBox", which is what you want, because
LatBox and LonBox already exist in the HTML. placeAt means "append this
widget's DOM node as a child of the given node", which you don't want,
because this results in trying to add LatBox as a child of itself, which is
not allowed.