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

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

動(dòng)態(tài)添加的項(xiàng)目不會(huì)附加到列表中

動(dòng)態(tài)添加的項(xiàng)目不會(huì)附加到列表中

我正在嘗試根據(jù)輸入值附加一個(gè)列表項(xiàng)。但是，不會(huì)附加列表項(xiàng)。我試圖在不同的地方使用腳本標(biāo)簽，但這沒有幫助。我錯(cuò)過了什么？這是我的 HTML<body><main>    <div>        <form>            <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">            <button type="submit" id="addtodo">+</button>        </form>        <div class="AddedTodo">            <ul id="myList">            </ul>        </div>            <div>            <p id="clearAll">Clear All</p>        </div>    </div></main></body><script type="text/javascript" src="script.js"></script>這是我的 JavaScript。document.getElementById("addtodo").onclick = function addItem() {    var ul = document.getElementById("newtodo").value;    var li = "<li>" + ul + "</li>";    document.getElementById("myList").appendChild(li);}
查看完整描述

4 回答

?
海綿寶寶撒

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

您需要使用createElement函數(shù)來創(chuàng)建您li的待辦事項(xiàng)items。然后在上面使用 appendChild - 也可以考慮使用addEventListener

我還添加了clearAll按鈕的功能。items這將使您從列表中清除所有要做的事情。

此外，由于您form在 HTML 中使用 a ，這意味著默認(rèn)行為是它將重新加載頁面。要阻止這種情況發(fā)生，請(qǐng)使用preventDefault方法。

現(xiàn)場演示：

var list = document.getElementById("myList")


//Add to do's

document.getElementById("addtodo").addEventListener('click', function(e) {

  e.preventDefault()

  var inputValue = document.getElementById("newtodo");

  var li = document.createElement('li')

  li.textContent = inputValue.value

  list.appendChild(li)

  inputValue.value = ''

}, false);



//Clear all

document.getElementById("clearAll").addEventListener('click', function(e) {

  e.preventDefault()

  list.innerHTML = ''

}, false);

<body>

  <main>

    <div>

      <form>

        <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">

        <button type="submit" id="addtodo">+</button>

      </form>

      <div class="AddedTodo">

        <ul id="myList">


        </ul>

      </div>

      <div>

        <button id="clearAll">Clear All</button>

      </div>

    </div>

  </main>

</body>


查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
不負(fù)相思意

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

試試這個(gè)簡單的解決方案...

myList.innerHTML+='<li>'+newtodo.value+'</li>';


查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
富國滬深

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

拳頭按鈕類型不應(yīng)該是submit它應(yīng)該是type="button"并且易于使用innerHTML。


<body>

<main>

    <div>

        <form>

            <input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">

            <button type="button" id="addtodo">+</button>

        </form>

        <div class="AddedTodo">

            <ul id="myList">


            </ul>

        </div>    

        <div>

            <p id="clearAll">Clear All</p>

        </div>

    </div>

</main>

</body>

<script type="text/javascript" src="script.js"></script>

document.getElementById("addtodo").onclick = function addItem() {


  const newtodo = document.getElementById("newtodo").value;


  const myList = document.getElementById("myList");


  myList.innerHTML += '<li>' + newtodo + '</li>';


}


查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
qq_花開花謝_0

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

SO 上有很多待辦事項(xiàng)列表示例代碼...

像這樣一個(gè)：How do I append more than one child element to a parent element Javascript


你錯(cuò)過了任何形式提交=>發(fā)送數(shù)據(jù)并加載新頁面（這里它重新定位同一頁面）

你的按鈕是提交，所以你必須跟蹤提交事件，而不是按鈕的點(diǎn)擊事件......


const myForm = document.getElementById('my-form')

  ,   myList = document.getElementById('my-list')

  ;

myForm.onsubmit=e=>

  {

  e.preventDefault() // stop the form submit ( don't let him sending data to server, don't let a page quit and loading the same one)


  let todoText =  myForm.newtodo.value.trim()  // get the todo value without spaces before / after

  if (todoText!=='')

    {

    let liTodo = document.createElement('li')

    liTodo.textContent = todoText

    myList.appendChild(liTodo)

    myForm.newtodo.value = '' // cleaner

    }

  }

<form id="my-form">

  <input type="text" name="newtodo" placeholder="New Todo...">

  <button type="submit" >+</button>

</form>

<br>

<ul id="my-list"></ul>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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