第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

為什么我的代碼在每個(gè)元素后返回一個(gè)逗號(hào)？

為什么我的代碼在每個(gè)元素后返回一個(gè)逗號(hào)？

浮云間 2023-04-01 17:25:54
我試圖返回每個(gè)元素前面帶有索引的數(shù)組，并刪除每個(gè)元素后面的逗號(hào)。我能夠?qū)⒚總€(gè)元素返回到一個(gè)新行，但push()仍然無(wú)法獲得編號(hào)列表。我試過(guò)在我的 js 中也使用<li>and 。我在這里錯(cuò)過(guò)了什么？<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>    <!-- <script src="js/students.js"></script> -->
查看完整描述

3 回答

?
慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

而不是依賴innerHtml，您應(yīng)該只從roster. 為了將其轉(zhuǎn)換為有序列表，您應(yīng)該將結(jié)果字符串用<ol>and括起來(lái)</ol>，并<li>為每個(gè)元素添加一個(gè)標(biāo)簽。請(qǐng)注意，roster數(shù)組應(yīng)初始化為空數(shù)組，而不是包含以下內(nèi)容的數(shù)組""：


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;

}


查看完整回答
反對(duì) 回復(fù) 2023-04-01
?
ITMISS

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個(gè)贊

改變：


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因?yàn)樗且粋€(gè)字符串?dāng)?shù)組，即roster.toString()


擴(kuò)展示例：


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>


查看完整回答
反對(duì) 回復(fù) 2023-04-01
?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊

這是一種在占位符元素內(nèi)創(chuàng)建有序列表的替代方法。它不使用數(shù)組，而是使用文檔作為狀態(tài)。


它沒(méi)有使用 sting 連接，而是使用編程方法來(lái)創(chuàng)建新元素并將其附加到文檔中。


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

我選擇動(dòng)態(tài)創(chuàng)建元素的原因是沒(méi)有任何項(xiàng)目的列表元素是無(wú)效的 HTML。



查看完整回答
反對(duì) 回復(fù) 2023-04-01
  • 3 回答
  • 0 關(guān)注
  • 171 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)