无法显示带有警报功能的列表答案

【问题标题】：unable to display a list with alert function无法显示带有警报功能的列表
【发布时间】：2021-01-16 07:54:57
【问题描述】：

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

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>

【问题讨论】：

你在任何时候都没有打电话给addElements。您只是提交表单。
我在提交后尝试调用它，但也不起作用
请更正您的问题，更清楚地说明您正在使用什么逻辑、您期望得到什么以及问题所在。

标签： javascript list dom alert

【解决方案1】：

所以你的问题是你没有在你的按钮上调用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>

【讨论】：

【解决方案2】：

首先你需要停止html表单提交

<form action="#" id="todoForm" onsubmit="return false;">

然后你需要将点击函数绑定到你的按钮，这样当按钮点击你的addElements函数就会被触发

<button class="addBtn" onclick="addElements()">

最后你需要得到输入值

document.getElementById('task').value;

完整的代码示例

let elements = [];

function addElements() {

  var task = document.getElementById('task').value;

  if (task.trim() != "") {
    elements.push(task);
    alert(elements)
  }

}

<body>
  <div class="container">

    <div id="todoList"></div>

    <form action="#" id="todoForm" onsubmit="return false;">
      <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>
    </form>

  </div>

</body>

【讨论】：

非常感谢！他帮助我解决了这个问题
很高兴为您提供帮助，欢迎来到 Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受