Ik krijg de melding “ReferenceError: document is not defined” terwijl ik probeer
var body = document.getElementsByTagName("body")[0];
Ik heb dit eerder gezien in andere code en veroorzaakte geen problemen. Waarom is het nu?
De bijbehorende HTML-pagina is slechts een div in de body.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/quiz.css" />
<script type="text/javascript" src="js/quiz.js"></script>
</head>
<body>
<div id="divid">Next</div>
</body>
</html>
de code is de volgende:
(function(){
var body = document.getElementsByTagName("body")[0];
function Question(question, choices, correctAns) {
this.question = question;
this.choices = choices;
this.correctAns = correctAns;
}
Question.prototype.checkAns = function(givenAns){
if (this.correctAns === givenAns) {
console.log("OK");
}
};
function Quiz() {
this.questions = [];
}
Quiz.prototype.showAllQuestions = function(){
this.questions.forEach(function(questions){
console.log(questions.question);
});
};
Quiz.prototype.showQuiz = function(){
this.questions.forEach(function(questions){
for (var i=0; i < questions.choices.length; i+=1) {
body.innerHTML(
"<input type=\"radio\" name=\"sex\" value=\"male\">"
+ questions.choices[i] + "<br>");
}
});
};
var q1 = new Question("What is red?", ["Color","Animal","Building"],1);
var q2 = new Question("Most popular music?", ["Latin","Pop","Rock"],2);
var quiz = new Quiz();
quiz.questions.push(q1);
quiz.questions.push(q2);
quiz.showAllQuestions();
})();
Probeer de hele code in deze link hier
Antwoord 1, Autoriteit 100%
Dit gebeurde met mij omdat ik Next JSgebruikte, die Server Side-weergave heeft. Wanneer u Server Side-weergave gebruikt, is er geen browser. Daarom is er geen variabele windowof document. Vandaar dat deze fout verschijnt.
Werk rond:
Als u volgende JS gebruikt, kunt u de dynamische weergave gebruiken om de serieweergave voor de component te voorkomen.
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
ssr: false
})
export default () => <DynamicComponentWithNoSSR />
Als u andere server-side-rendering-bibliotheek gebruikt. Voeg vervolgens de code toe die u op de clientzijde wilt uitvoeren in componentDidMount. Als u react hooks gebruikt, gebruik dan useEffectsop de plaats van componentsDidMount.
import React, {useState, useEffects} from 'react';
const DynamicComponentWithNoSSR = <>Some JSX</>
export default function App(){
[a,setA] = useState();
useEffect(() => {
setA(<DynamicComponentWithNoSSR/>)
});
return (<>{a}<>)
}
Referenties:
- https://nextjs.org/docs/advanced- features/dynamic-import#with-no-ssr
- https://reactjs.org/docs/hooks-effect.html
Antwoord 2, autoriteit 32%
Het hangt ervan af wanneer de zelfuitvoerende anonieme functie actief is. Het is mogelijk dat het actief is voordat window.documentis gedefinieerd.
Probeer in dat geval een luisteraar toe te voegen
window.addEventListener('load', yourFunction, false);
// ..... or
window.addEventListener('DOMContentLoaded', yourFunction, false);
yourFunction () {
// some ocde
}
Update:(na de update van de vraag en toevoeging van de code)
Lees het volgende over de problemen bij het verwijzen naar DOM-elementen vanuit een JavaScript dat is ingevoegd en uitgevoerd in het head-element:
– “getElementsByTagName(…)[0]” is niet gedefinieerd?
– De DOM doorkruisen
Antwoord 3, autoriteit 23%
Probeer op die manier het scriptelement net voor de /body-tag toe te voegen
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/quiz.css" />
</head>
<body>
<div id="divid">Next</div>
<script type="text/javascript" src="js/quiz.js"></script>
</body>
</html>
Antwoord 4
probeer: window.document……
var body = window.document.getElementsByTagName("body")[0];