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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

動態(tài)添加的項目不會附加到列表中

動態(tài)添加的項目不會附加到列表中

哆啦的時光機 2023-01-06 11:05:19
我正在嘗試根據(jù)輸入值附加一個列表項。但是，不會附加列表項。我試圖在不同的地方使用腳本標簽，但這沒有幫助。我錯過了什么？這是我的 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貢獻1809條經(jīng)驗 獲得超8個贊

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

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

此外，由于您form在 HTML 中使用 a ，這意味著默認行為是它將重新加載頁面。要阻止這種情況發(fā)生，請使用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>


查看完整回答
反對 回復 2023-01-06
?
不負相思意

TA貢獻1777條經(jīng)驗 獲得超10個贊

試試這個簡單的解決方案...

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


查看完整回答
反對 回復 2023-01-06
?
富國滬深

TA貢獻1790條經(jīng)驗 獲得超9個贊

拳頭按鈕類型不應該是submit它應該是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>';


}


查看完整回答
反對 回復 2023-01-06
?
qq_花開花謝_0

TA貢獻1835條經(jīng)驗 獲得超7個贊

SO 上有很多待辦事項列表示例代碼...

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


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

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


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>


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

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