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

Question

我试图返回每个元素前面带有索引的数组，并删除每个元素后面的逗号。我能够将每个元素返回到一个新行，但push()仍然无法获得编号列表。我试过在我的 js 中也使用<li>and 。我在这里错过了什么？<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>and括起来</ol>，并<li>为每个元素添加一个标签。请注意，roster数组应初始化为空数组，而不是包含以下内容的数组""：var roster = new Array();function addStudent() {&nbsp; &nbsp; // TODO lookup the user entered text&nbsp; &nbsp; var newStudent = document.getElementById("student").value;&nbsp; &nbsp; // TODO store the new student name in global list&nbsp; &nbsp; roster.push("<div>" + newStudent + "</div>");&nbsp; &nbsp; // TODO render the entire list into the output div&nbsp; &nbsp; rosterStr = '<ol>' + roster.map(r => `<li>${r}</li>`).join('') + '</ol>';&nbsp; &nbsp; document.getElementById("output").innerHTML = "Student List" + rosterStr;&nbsp; &nbsp; return false;}

Answer 2

改变：roster.innerHTML = roster.join('');document.getElementById("output").innerHTML = "Student List" + roster;到（或类似的）document.getElementById("output").innerHTML = `Student List:<ol>&nbsp;<li>${roster.join('</li><li>')}</li></ol>`的原因,是"Student List" + roster因为它是一个字符串数组，即roster.toString()扩展示例：let roster = ['Steve', 'Bill']// wrongconsole.log('toString:', roster.toString())// wrongdocument.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>&nbsp;<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 listfunction createList(target) {&nbsp; let list = output.querySelector('ol') || document.createElement("ol");&nbsp; // append the element if its a newly created element&nbsp; if (!list.parentNode) target.appendChild(list);&nbsp; return list;}// Appends a <li> element to the list with the text provided by the name argumentfunction addStudent(name, list){&nbsp; let student = document.createElement('li');&nbsp; student.appendChild(document.createTextNode(name));&nbsp; list.appendChild(student);&nbsp; return student;};// This adds an event listener which catches the&nbsp;// submit event as it bubbles up to the top of the dom.// Since we are not attaching the handler directly&nbsp;// to the element we don't have to wait for the document to be readydocument.addEventListener('submit', function(event){&nbsp; let form = event.target;&nbsp; let output = document.getElementById('output');&nbsp; // bail early if this isn't the right form or there is no output&nbsp; if (form.id !== 'theForm' || !output) return;&nbsp;&nbsp; event.preventDefault(); // prevents the normal form submission&nbsp; addStudent(form["student"].value, createList(output));});<div id="output"></div><form action="#" method="post" id="theForm" novalidate>&nbsp; <fieldset>&nbsp; &nbsp; <legend>Enter a student name to add to the roster</legend>&nbsp; &nbsp; <div><label for="student">Student Name</label><input type="text" name="student" id="student"></div>&nbsp; &nbsp; <input type="submit" value="Add to Roster" id="submit">&nbsp; &nbsp; <div id="output"></div>&nbsp; </fieldset></form>我选择动态创建元素的原因是没有任何项目的列表元素是无效的 HTML。