如何正确返回 divStr？

Question

我目前有一个需要 2 个输入和一个 divStr 的函数

function showallnick(){
  let list = [" the Pianist ", " the Scientist ", " the Coder ", " the Student ", " Sleepy "];
  let first = firstInEl.value;
  let last = lastInEl.value;
  let divStr = "";
  for(let i = 0; i < list.length; i++) {
    divStr += `<div> ${list[i]}</div>`;
  }
  nicknameEl.innerHTML = allNickname(first, divStr, last);
}

但是当我退货时

function allNickname (f, d, l){
  return f + d + l
}

返回函数如下所示：

First 
divStr
divStr
Last

而不是

First divStr Last
First divStr Last
First divStr Last
First divStr Last

返回函数有什么问题？

Answer 1

您似乎想在list 的每个元素上使用allNickname。

function showallnick(){
  let list = [" the Pianist ", " the Scientist ", " the Coder ", " the Student ", " Sleepy "];
  let first = firstInEl.value;
  let last = lastInEl.value;
  let divStr = "";
  for(let i = 0; i < list.length; i++) {
    divStr += `<div>${allNickname(first, list[i], last)}</div>`;
  }
  nicknameEl.innerHTML = divStr;
}

这是一个完整的版本：

function showallnick(){
  let list = [" the Pianist ", " the Scientist ", " the Coder ", " the Student ", " Sleepy "];
  let first = firstInEl.value;
  let last = lastInEl.value;
  let divStr = "";
  for(let i = 0; i < list.length; i++) {
    divStr += `<div>${allNickname(first, list[i], last)}</div>`;
  }
  nicknameEl.innerHTML = divStr;
}

function allNickname (f, d, l){
  return f + d + l
}

<input id="firstInEl" placeholder="first" />
<input id="lastInEl" placeholder="last" />

<button onclick="showallnick()">showallnick()</button>

<div id="nicknameEl"></div>

Answer 2

function functionOne(){
  let first = firstInEl.value;
  let last = lastInEl.value;
  let divStr = "";
  for(let i = 0; i < list.length; i++) {
    divStr += `<div> ${first} ${list[i]} ${last}</div> \n`;
  }
   nicknameEl.innerHTML = allNickname(divStr);
   console.log(allNickname(divStr))
}

function allNickname (d){
  return d;
}