首頁猿問為什么我的代碼在每個元素后返回一個逗號？

為什么我的代碼在每個元素后返回一個逗號？

JavaScript

浮云間 2023-04-01 17:25:54

我試圖返回每個元素前面帶有索引的數組，并刪除每個元素后面的逗號。我能夠將每個元素返回到一個新行，但push()仍然無法獲得編號列表。我試過在我的 js 中也使用<li>and 。我在這里錯過了什么？<ol><div>// TODO keep the student list state in a global listvar 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>

查看完整描述

3 回答

慕尼黑8549860

TA貢獻1818條經驗獲得超11個贊

而不是依賴innerHtml，您應該只從roster. 為了將其轉換為有序列表，您應該將結果字符串用<ol>and括起來</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;

}

反對回復 2023-04-01

ITMISS

TA貢獻1871條經驗獲得超8個贊

改變：

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>

反對回復 2023-04-01

眼眸繁星

TA貢獻1873條經驗獲得超9個贊

這是一種在占位符元素內創建有序列表的替代方法。它不使用數組，而是使用文檔作為狀態。

它沒有使用 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));

});

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

</fieldset>

</form>

我選擇動態創建元素的原因是沒有任何項目的列表元素是無效的 HTML。

反對回復 2023-04-01

3 回答
0 關注
161 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么我的代碼在每個元素后返回一個逗號？

為什么我的代碼在每個元素后返回一個逗號？

3 回答

添加回答

為什么我的代碼在每個元素后返回一個逗號？

為什么我的代碼在每個元素后返回一個逗號？