テキストノードが画面に表示されない

オブジェクトの配列をループして、一部の入力フィールドで結果を画面上に動的に表示しようとしていますテキストノードを作成して入力するまでうまくいっていたようです入力タグ。それはノードとコンソールを作成し、要素タブはテキストノードを認識しますが、画面には表示されません。また、未定義のテキストで余分な入力があります。どんな助けでも大歓迎です！テキストノードが画面に表示されない

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

テキストノードが画面に表示されない

答えて

関連する問題