文本節點不顯示在屏幕上

我試圖通過一個對象數組來循環，並在屏幕上的某些輸入字段中動態顯示結果直到我創建文本節點才能放入輸入標籤。它將創建節點，控制檯和元素選項卡可識別文本節點，但不會顯示在屏幕上。我也得到一個額外的輸入與未定義的文本。任何幫助都將不勝感激！文本節點不顯示在屏幕上

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>

來源

2017-09-08 PopGoesTheGoomba

不能在textNode（或任何其他HTML它所事項）添加到輸入元素。最好的辦法是使用一個標籤，並將輸入和文本節點放在這裏面。當您點擊文本時，它具有獲得選定輸入的額外好處。

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>

來源

2017-09-10 15:26:06 Thijs

謝謝！這工作。我很感激幫助。 – PopGoesTheGoomba

文本節點不顯示在屏幕上

回答

相關問題