时间戳

首页 > 解决方案 > 无法显示带有警报功能的列表

javascript - 无法显示带有警报功能的列表

问题描述

在这里的第一篇文章，我正在尝试编写一个遵循 tutrial 的代码，它是一个待办事项列表，我编写了一个函数，该函数获取文本类型输入的内容并将其添加到列表中，我使用内部警报测试代码该功能但它确实有效并且没有显示任何警报，这是代码。提前致谢

let elements = [];
function addElements(){
    if (document.querySelector("#task").nodeValue.trim() != ""){       
        elements.push(document.querySelector("#task").nodeValue.trim())
        alert(elements);
    }

}
<body>
  <div class="container">
    <div id="todoList"></div>
      <form action="#" id="todoForm">
        <label for="task">Task: </label>
        <input type="text" name="task" id="task" autofocus>
        <button class="addBtn">
            <img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
        </button>
        <!--<input type="submit" id="submit" value="Add To-Do">-->
      </form>
  </div>
  <script src="../todo_list/apps.js"></script>
</body>

标签： javascriptlistdomalert

解决方案

所以你的问题是你没有addElements()按下你的按钮。

而不是使用nodeValue只是使用value。

这是工作代码

let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
    if (document.querySelector("#task").value.trim() != ""){       
        elements.push(document.querySelector("#task").value.trim())
        alert(elements);
    }

}
<body>
  <div class="container">
    <div id="todoList"></div>
      <form action="#" id="todoForm">
        <label for="task">Task: </label>
        <input type="text" name="task" id="task" autofocus>
        <button class="addBtn" onclick="addElements()">
            <img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
        </button>
        <!--<input type="submit" id="submit" value="Add To-Do">-->
      </form>
  </div>
</body>

推荐阅读