为什么我的代码在每个元素后返回一个逗号？

Question

我正在尝试 return 每个元素前面都有索引的数组，同时删除每个元素后面的逗号。我能够 return 每个元素到一个新行 push() 但仍然无法获得编号列表。我已经尝试在我的 js 中使用 <li> 和 <ol>，其中 <div> 也是如此。我在这里错过了什么？

// TODO keep the student list state in a global list

var roster = new Array("");

function addStudent() {
    // TODO lookup the user entered text

    var newStudent = document.getElementById("student").value;

    // TODO store the new student name in global list

    roster.push("<div>" + newStudent + "</div>");

    // TODO render the entire list into the output div

    roster.innerHTML = roster.join('');
    document.getElementById("output").innerHTML = "Student List" + roster;

    return false;
} 

function init() {
    // TODO register the onsubmit for 'theForm' to use addStudent

    if (document && document.getElementById) {
        document.getElementById('theForm').onsubmit = addStudent;
    }
} 
window.onload = init;

    <form action="#" method="post" id="theForm" novalidate>
        <fieldset>
            <legend>Enter a student name to add to the roster</legend>
            <div><label for="student">Student Name</label><input type="text" name="student" id="student"></div>
            <input type="submit" value="Add to Roster" id="submit">
            <div id="output"></div>
        </fieldset>
    </form>
    <!-- <script src="js/students.js"></script> -->

Answer 1

与其依赖 innerHtml，不如从 roster 创建一个字符串。为了将其转换为有序列表，您应该用 <ol> 和 </ol> 包围结果字符串，并为每个元素添加一个 <li> 标记。注意 roster 数组应该初始化为空数组，而不是包含 "":

的数组

var roster = new Array();

function addStudent() {
    // TODO lookup the user entered text

    var newStudent = document.getElementById("student").value;

    // TODO store the new student name in global list

    roster.push("<div>" + newStudent + "</div>");

    // TODO render the entire list into the output div

    rosterStr = '<ol>' + roster.map(r => `<li>${r}</li>`).join('') + '</ol>';
    document.getElementById("output").innerHTML = "Student List" + rosterStr;

    return false;
}

Answer 2

变化：

roster.innerHTML = roster.join('');
document.getElementById("output").innerHTML = "Student List" + roster;

到（或类似）

document.getElementById("output").innerHTML = `
Student List:
<ol>
 <li>${roster.join('</li><li>')}</li>
</ol>`

, 的原因是 "Student List" + roster 因为它是一个字符串数组，即 roster.toString()

扩展示例：

let roster = ['Steve', 'Bill']

// wrong
console.log('toString:', roster.toString())

// wrong
document.getElementById("output").innerHTML = 'Wrong<br>'
document.getElementById("output").innerHTML += "Student List" + roster;

// right (using join, there is various other ways to build output)
document.getElementById("output").innerHTML += '<br><hr>Right<br>'
document.getElementById("output").innerHTML += `
Student List:
<ol>
 <li>${roster.join('</li><li>')}</li>
</ol>
`

<div id="output"></div>

Answer 3

这是在占位符元素内创建有序列表的替代方法。它不使用数组，而是使用文档作为状态。

它没有使用 sting 连接，而是使用编程方法来创建新元素并将其附加到文档。

// Creates an `<ol>` element in the target node if none can be found
// or returns an existing list
function createList(target) {
  let list = output.querySelector('ol') || document.createElement("ol");
  // append the element if its a newly created element
  if (!list.parentNode) target.appendChild(list);
  return list;
}

// Appends a <li> element to the list with the text provided by the name argument
function addStudent(name, list){
  let student = document.createElement('li');
  student.appendChild(document.createTextNode(name));
  list.appendChild(student);
  return student;
};

// This adds an event listener which catches the 
// submit event as it bubbles up to the top of the dom.
// Since we are not attaching the handler directly 
// to the element we don't have to wait for the document to be ready
document.addEventListener('submit', function(event){
  let form = event.target;
  let output = document.getElementById('output');
  // bail early if this isn't the right form or there is no output
  if (form.id !== 'theForm' || !output) return; 
  event.preventDefault(); // prevents the normal form submission
  addStudent(form["student"].value, createList(output));
});

<div id="output"></div>

<form action="#" method="post" id="theForm" novalidate>
  <fieldset>
    <legend>Enter a student name to add to the roster</legend>
    <div><label for="student">Student Name</label><input type="text" name="student" id="student"></div>
    <input type="submit" value="Add to Roster" id="submit">
    <div id="output"></div>
  </fieldset>
</form>

我选择动态创建元素的原因是没有任何项目的列表元素是无效的HTML。

为什么我的代码在每个元素后返回一个逗号？

Why is my code returning a comma after every element?

javascript

arrays

numbered-list