为了账号安全,请及时绑定邮箱和手机立即绑定

动态添加的项目不会附加到列表中

动态添加的项目不会附加到列表中

哆啦的时光机 2023-01-06 11:05:19

我正在尝试根据输入值附加一个列表项。但是,不会附加列表项。我试图在不同的地方使用脚本标签,但这没有帮助。我错过了什么?


这是我的 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贡献1532条经验 获得超8个赞

您需要使用createElement函数来创建您li的待办事项items。然后在上面使用 appendChild - 也可以考虑使用addEventListener

我还添加了clearAll按钮的功能。items这将使您从列表中清除所有要做的事情。

此外,由于您form在 HTML 中使用 a ,这意味着默认行为是它将重新加载页面。要阻止这种情况发生,请使用preventDefault方法。

现场演示:

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贡献1516条经验 获得超10个赞

试试这个简单的解决方案...

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


查看完整回答
反对 回复 2023-01-06
?
富国沪深

TA贡献1555条经验 获得超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贡献1573条经验 获得超5个赞

SO 上有很多待办事项列表示例代码...

像这样一个:How do I append more than one child element to a parent element Javascript


你错过了任何形式提交=>发送数据并加载新页面(这里它重新定位同一页面)

你的按钮是提交,所以你必须跟踪提交事件,而不是按钮的点击事件......


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 关注
  • 18 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信