Text Knoten nicht auf dem Bildschirm angezeigt

Ich versuche, durch ein Array von Objekten zu durchlaufen und die Ergebnisse dynamisch auf dem Bildschirm in einigen Eingabefeldern anzuzeigen Es schien gut zu gehen, bis ich einen Textknoten erstellt, in den Eingabe-Tag Es erstellt den Knoten und die Registerkarte Konsole und Elemente erkennt den Textknoten, wird aber nicht auf dem Bildschirm angezeigt. Ich bekomme auch eine zusätzliche Eingabe mit undefiniertem Text. Jede Hilfe wird sehr geschätzt!Text Knoten nicht auf dem Bildschirm angezeigt

var questions = [ 
 

 
    { 
 
    one: "In which HTML element do we put in Javascript code?", 
 
    choices1: ['<js>', '<script>', '<body>', '<link>'] 
 
    }, 
 
    { 
 
    2: 'Which HTML attribute is used to reference an external Javascript file?', 
 
    choices2: ['src', 'rel', 'type', 'href'] 
 
    }, 
 
    { 
 
    3: 'How would you write "Hello" in an alert box?', 
 
    choices3: ['msg("Hello")', 'alertBox("Hello")', 'document.write("Hello")', 'alert("Hello")'] 
 
    }, 
 
    { 
 
    4: 'Javascript is directly related the the "Java" programming language', 
 
    choices4: ['true', 'false'] 
 
    }, 
 
    { 
 
    5: "A variable in Javascript must start with which special character", 
 
    choices5: ['@', '$', '#', 'No Special Character'] 
 
    } 
 

 
] 
 

 
var h3Q1 = document.querySelector('.q1'); 
 

 
h3Q1.innerHTML = questions[0].one; 
 
var br = '<br>'; 
 

 

 
var form = document.querySelector('[name=quizForm]'); 
 

 
for (var i = 0; i <= questions[0].choices1.length; i++) { 
 
    var input = document.createElement('input'); 
 
    var textNode = document.createTextNode(questions[0].choices1[i]); 
 
    input.type = 'radio'; 
 
    input.name = 'q1'; 
 
    input.value = 'a'; 
 
    input.id = 'q1a'; 
 
    input.appendChild(textNode); 
 
    form.insertBefore(input, form[0]); 
 
    input.insertAdjacentHTML('afterend', br); 
 

 
}

<!doctype html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title>Javascript Quiz</title> 
 
    <meta name="description" content="The HTML5 Herald"> 
 
    <meta name="author" content="SitePoint"> 
 

 
    <link rel="stylesheet" href="css/styles.css?v=1.0"> 
 

 
    <!--[if lt IE 9]> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <header> 
 
     <h1>Simple Javascript Quiz</h1> 
 
     <p>Test your knowledge in <strong>Javascript fundamentals</strong></p> 
 
    </header> 
 
    <section> 
 
     <div id="results"></div> 
 

 
     <form name="quizForm" onsubmit="return submitAnswers()"> 
 
     <h3 class="q1"></h3> 
 

 
     <input type="submit" class="submit" value="Submit Answers"> 
 

 

 

 
     </form> 
 
    </section> 
 
    </div> 
 

 

 

 
    <script src="js/scripts.js"></script> 
 
</body> 
 

 
</html>

Quelle

2017-09-08 PopGoesTheGoomba

Sie einen textNode nicht hinzufügen können (oder jede andere HTML für das, was es ankommt) mit einem Eingangselement. Am besten verwenden Sie ein Etikett und platzieren Sie den Eingang und Textnode in diesem. Es hat den zusätzlichen Vorteil, dass die Eingabe ausgewählt wird, wenn Sie auf den Text klicken.

var questions = [ 
 

 
    { 
 
    one: "In which HTML element do we put in Javascript code?", 
 
    choices1: ['<js>', '<script>', '<body>', '<link>'] 
 
    }, 
 
    { 
 
    2: 'Which HTML attribute is used to reference an external Javascript file?', 
 
    choices2: ['src', 'rel', 'type', 'href'] 
 
    }, 
 
    { 
 
    3: 'How would you write "Hello" in an alert box?', 
 
    choices3: ['msg("Hello")', 'alertBox("Hello")', 'document.write("Hello")', 'alert("Hello")'] 
 
    }, 
 
    { 
 
    4: 'Javascript is directly related the the "Java" programming language', 
 
    choices4: ['true', 'false'] 
 
    }, 
 
    { 
 
    5: "A variable in Javascript must start with which special character", 
 
    choices5: ['@', '$', '#', 'No Special Character'] 
 
    } 
 

 
] 
 

 
var h3Q1 = document.querySelector('.q1'); 
 

 
h3Q1.innerHTML = questions[0].one; 
 
var br = '<br>'; 
 

 

 
var form = document.querySelector('[name=quizForm]'), 
 
    button = form.querySelector('.submit'); 
 

 
for (var i = 0; i <= questions[0].choices1.length; i++) { 
 
    var input = document.createElement('input'); 
 
    var label = document.createElement('label'); 
 
    var textNode = document.createTextNode(questions[0].choices1[i]); 
 
    input.type = 'radio'; 
 
    input.name = 'q1'; 
 
    input.value = 'a'; 
 
    input.id = 'q1a'; 
 
    label.append(input); 
 
    label.appendChild(textNode); 
 
    form.insertBefore(label, button); 
 
    label.insertAdjacentHTML('afterend', br); 
 

 
}

<!doctype html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title>Javascript Quiz</title> 
 
    <meta name="description" content="The HTML5 Herald"> 
 
    <meta name="author" content="SitePoint"> 
 

 
    <link rel="stylesheet" href="css/styles.css?v=1.0"> 
 

 
    <!--[if lt IE 9]> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <header> 
 
     <h1>Simple Javascript Quiz</h1> 
 
     <p>Test your knowledge in <strong>Javascript fundamentals</strong></p> 
 
    </header> 
 
    <section> 
 
     <div id="results"></div> 
 

 
     <form name="quizForm" onsubmit="return submitAnswers()"> 
 
     <h3 class="q1"></h3> 
 

 
     <input type="submit" class="submit" value="Submit Answers"> 
 

 

 

 
     </form> 
 
    </section> 
 
    </div> 
 

 

 

 
    <script src="js/scripts.js"></script> 
 
</body> 
 

 
</html>

Quelle

2017-09-10 15:26:06 Thijs

Vielen Dank! Das hat funktioniert. Ich schätze die Hilfe. – PopGoesTheGoomba

Text Knoten nicht auf dem Bildschirm angezeigt

Antwort

Verwandte Themen