Javascript 循环应该创建10个段落并插入文本，但文本只出现在一个段落中_Javascript_For Loop_Dom

Javascript 循环应该创建10个段落并插入文本，但文本只出现在一个段落中

javascript for-loop dom

Javascript 循环应该创建10个段落并插入文本，但文本只出现在一个段落中,javascript,for-loop,dom,Javascript,For Loop,Dom,在firebug控制台中，页面的源代码中显示了10个段落，但只有第一个段落包含文本看起来循环每次都会将文本插入同一段落，覆盖其值。如何在每个段落中插入文本 (function(){ var names = ["Yaakov", "John", "Jen", "Jason", "Paul", "Frank", "Larry", "Paula", "Laura", "Jim"]; for (var name in names) { var new

在firebug控制台中，页面的源代码中显示了10个段落，但只有第一个段落包含文本

看起来循环每次都会将文本插入同一段落，覆盖其值。如何在每个段落中插入文本

(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>


模块4解决方案启动器
模块4解决方案启动器

问题在于，您正在创建十个具有相同id的节点new\u par，因此在创建时总是会得到对第一个new\u par的引用

 document.getElementById("new_par").innerHTML

最简单的解决方案是使用已有的引用，无需调用getElementById

new_par.innerHTML = ...

问题是每个段落都有相同的id。我在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++;
    }

})();

不能在多个TME中使用同一ID。只需使用new\u par
而不是document.getElementById（“new\u par”）
。你根本不需要身份证。@david有人解释说，这可能会更清楚。。。我补充了我的答案中缺少的一点