one div-container produces "Uncaught TypeError: Cannot read property 'appendChild' of undefined"
Question
I have problem with the following error.
"Uncaught TypeError: Cannot read property 'appendChild' of undefined"
The meaning of this type of error I already have understand, but I cant explain me what s wrong with my code.
To my project, the idea is a numerical simulation of an orbit from a satellite, I will do an atmospheric model for this. I am using THREE.js for this.
I have a html file with the following code in the body. There is on div-Container with the id "container", which I later want to call in one function. To my mind, the error means that I have to initialize the div-Container. But how it works??? Or what else I'm doing wrong?
Blockquote
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
//var container = document.getElementById('container');
document.body.appendChild(renderer.domElement);
document.getElementById("container").body.appendChild( renderer.domElement ); //here we have the error producing line
Blockquote
<body>
<link href="style.css" type="text/css" media="print" />
<div id="container"> //here is the div-container
<h2 id="titel">Numerische Simulation </h2>
<div id="sliderhoehe">
<input type="range" id="hoehe" name="hoehe" min="100" max="500" value="300" list="hoehewerte" step="20.0">
<label for="hoehe">Hoehe in km</label>
<datalist id="hoehewerte">
<option value="100" label="100"></option>
<option value="200" label="200"></option>
<option value="300" label="300"></option>
<option value="400" label="400"></option>
<option value="500" label="500"></option>
</datalist>
</div>
<div>
<input type="range" id="startv" name="startv" min="10000" max="200000" value="28000" list="startvwerte" step="1000">
<label for="startv">Geschwindikeit in km/h</label>
<datalist id="startvwerte">
<option value
</datalist>
</div>
<output for="hoehe" id="outputhoehe"></output>
<button id="stop">Stop</button>
<button id="start">Start</button>
<button id="reset">Reset</button>
</div>
I need help. Thank you for answering.
1 answers
solution1
0 2020-08-31 19:15:52
I'm not 100% sure what you're trying to do, but the error is thrown because you try to access appendChild on the undefined body property on the container element. If you want to append renderers DOM element to the container element you would just append straight to it by removing .body . Maybe there was confusion because there's a body element, which maybe you thought mean something like "the body of the element".
renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById("container").appendChild( renderer.domElement );
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script> <body> <link href="style.css" type="text/css" media="print" /> <div id="container"> //here is the div-container <h2 id="titel">Numerische Simulation </h2> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.