Javascript 循环遍历数组并将结果输出到html_Javascript_Arrays_Loops

Javascript 循环遍历数组并将结果输出到html

javascript arrays loops

Javascript 循环遍历数组并将结果输出到html,javascript,arrays,loops,Javascript,Arrays,Loops,我有一个方法speak（），它接受两个参数。这是原型的属性，因此多个对象将使用它我想获取它返回的值，循环它们，并将它们输出到我的html。我不明白的是，我如何将每个段落标记作为目标，使其与我生成的每个变量结果的输出相对应？这需要一个双循环吗？我迷路了。 var para=document.querySelectorAll（'p'）这里有一个检查一下这个- 继续将HTML添加到文本中。最后将它们添加到DOM中 var speak = function(what, job) { var

我有一个方法speak（），它接受两个参数。这是原型的属性，因此多个对象将使用它

我想获取它返回的值，循环它们，并将它们输出到我的html。我不明白的是，我如何将每个段落标记作为目标，使其与我生成的每个变量结果的输出相对应？这需要一个双循环吗？我迷路了。 var para=document.querySelectorAll（'p'）

这里有一个

检查一下这个-

继续将HTML添加到文本中。最后将它们添加到DOM中

var speak = function(what, job) {
    var whoWhat = this.name + ' says, ' + what,
        whoJob = this.name + "'s job is: " + job;
    console.log(whoWhat);
    console.log(whoJob);
    return "<p>"+whoWhat+", "+whoJob+"</p>";
};

var txt = "";
var randy = new Peep('Randy', 'lawyer');
txt+=randy.speak('"blahblah"', randy.job);

var mandy = new Peep('Mandy', 'mom');
txt+=mandy.speak('"woooooaahhhh"', mandy.job);
document.getElementById('result').innerHTML = txt;

//in HTML add the result node
<body>
  <p id='result'>
  </p>
</body>

var speak=函数（什么，作业）{
var whohat=this.name+“说，”+what，
whoJob=this.name+“”的作业是：“+job；
console.log（whohat）；
console.log（whoJob）；
返回“”+whohat+”，“+whoJob+””；
};
var txt=“”；
var randy=新Peep（“randy”，“律师”）；
txt+=randy.speak（'blahblah'，randy.job）；
var mandy=新的窥视（“mandy”，“mom”）；
txt+=mandy.speak（'woooooaaahh'，mandy.job）；
document.getElementById（'result'）.innerHTML=txt；
//在HTML中添加结果节点

使用JavaScript，您可以访问DOM（文档对象模型），并可以将新元素附加到现有元素中。例如，您可以创建一个新的段落元素，并将此段落元素添加到id为“result”的现有div中。以下是一个例子：

 var appendText = function (text, parentId) {
     var para = document.createElement("p");
     var node = document.createTextNode(text);
     para.appendChild(node);
     var parentElement = document.getElementById(parentId);
     parentElement.appendChild(para);
 }

 var speak = function (what, job) {
     var whoWhat = this.name + ' says, ' + what,
         whoJob = this.name + "'s job is: " + job;
     return [whoWhat, whoJob];
 };

 function Peep(name, job) {
     this.name = name;
     this.job = job;
 }

 Peep.prototype.speak = speak;

 var randy = new Peep('Randy', 'lawyer');
 var randySays = randy.speak('"blahblah"', randy.job);
 appendText(randySays[0], "result");
 appendText(randySays[1], "result");

 var mandy = new Peep('Mandy', 'mom');
 var mandySays = mandy.speak('"woooooaahhhh"', mandy.job);
 appendText(mandySays[0], "result");
 appendText(mandySays[1], "result");

以下是包含所需html的JSFIDLE:。您还可以在此处找到有关如何将段落附加到DOM的更多信息：

 var appendText = function (text, parentId) {
     var para = document.createElement("p");
     var node = document.createTextNode(text);
     para.appendChild(node);
     var parentElement = document.getElementById(parentId);
     parentElement.appendChild(para);
 }

 var speak = function (what, job) {
     var whoWhat = this.name + ' says, ' + what,
         whoJob = this.name + "'s job is: " + job;
     return [whoWhat, whoJob];
 };

 function Peep(name, job) {
     this.name = name;
     this.job = job;
 }

 Peep.prototype.speak = speak;

 var randy = new Peep('Randy', 'lawyer');
 var randySays = randy.speak('"blahblah"', randy.job);
 appendText(randySays[0], "result");
 appendText(randySays[1], "result");

 var mandy = new Peep('Mandy', 'mom');
 var mandySays = mandy.speak('"woooooaahhhh"', mandy.job);
 appendText(mandySays[0], "result");
 appendText(mandySays[1], "result");