ループは10段落を作成してテキストを挿入するが、テキストは1つにしか表示されないと仮定している

Firebugコンソールでは、10段落がページのソースコードに表示されますが、ループは10段落を作成してテキストを挿入するが、テキストは1つにしか表示されないと仮定している

ループがそのたびに同じ段落にテキストを挿入し、その値を上書きするように見えます。各段落にテキストを挿入するには？ここで

(function(){ 

    var names = ["Yaakov", "John", "Jen", "Jason", "Paul", 
     "Frank", "Larry", "Paula", "Laura", "Jim"]; 
    for (var name in names) { 
     var new_par = document.createElement("p"); 
     new_par.id = "new_par"; 
     var greeter = document.getElementById("greeter"); 
     greeter.appendChild(new_par); 

     var firstChar = names[name].charAt(0).toLowerCase(); 

     if (firstChar === 'j') { 
      //byeSpeaker.speak(names[name]); 
      document.getElementById("new_par").innerHTML = "Goodbye" + " " + names[name]; 


     } else { 
      //helloSpeaker.speak(names[name]); 
      document.getElementById("new_par").innerHTML = "Hello" + " " + names[name];   
    } 
    } 

})();

はHTMLです：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Module 4 Solution Starter</title> 

</head> 
<body> 
    <h1>Module 4 Solution Starter</h1> 
    <div id="greeter"></div> 

    <script src="SpeakHello.js"></script> 
    <script src="SpeakGoodBye.js"></script> 
    <script src="script.js"></script> 
</body> 
</html>

出典

2016-11-19 Andy Newman

同じIDの複数の文字は使用できません。単に 'document.getElementById（" new_par "）'の代わりに 'new_par'を使うだけです。 IDはまったく必要ありません。 – Xufox

@davidそれは説明されている、それはより厳しいかもしれない...私は私の答えに欠けていた少しを追加しました –

問題は各段落が同じidを持つことです。 counter変数を追加して、IDの末尾に追加します。

(function(){ 
    var counter = 0; 
    var names = ["Yaakov", "John", "Jen", "Jason", "Paul", 
     "Frank", "Larry", "Paula", "Laura", "Jim"]; 
    for (var name in names) { 

     var new_par = document.createElement("p"); 
     var par_id = "new_par" + counter; 
     new_par.id = par_id; 
     var greeter = document.getElementById("greeter"); 
     greeter.appendChild(new_par); 

     var firstChar = names[name].charAt(0).toLowerCase(); 

     if (firstChar === 'j') { 
      //byeSpeaker.speak(names[name]); 
      document.getElementById(par_id).innerHTML = "Goodbye" + " " + names[name]; 

     } else { 
      //helloSpeaker.speak(names[name]); 
      document.getElementById(par_id).innerHTML = "Hello" + " " + names[name];   
    } 
    counter++; 
    } 

})();

出典

2016-11-19 20:52:57 Ekaterina1234

問題はnew_par、同じIDを持つ10個のノードを作成しているので、あなたが

を行う際には、必ず最初に#new_parへの参照を取得しているということです

document.getElementById("new_par").innerHTML

最も簡単な解決策は、既に持っている参照を使用することです。getElementByIdを呼び出す必要はありません。

new_par.innerHTML = ...

出典

2016-11-19 20:46:54

今、firebugに1つの段落だけが表示されます... –

ループは10段落を作成してテキストを挿入するが、テキストは1つにしか表示されないと仮定している

答えて

関連する問題