个人中心
gpt4 book ai didi

提交时的 JavaScript addEventListener 不起作用

转载 作者：行者123 更新时间：2023-12-02 21:33:08 25 4
gpt4 key购买 nike

这完全是新手问题，但我的第一个 JavaScript 任务遇到了严重问题。我决定学习 JS，并从 TODO 列表开始，但现在我却陷入了困境。

提交表单时应触发的事件监听器不起作用。当我更改事件时，它会监听“单击”、“焦点”或“模糊”，它可以工作，但不能与提交一起使用。谁能给点建议吗？

PS。 event.preventDefault(); 有简单的解释吗？它有什么作用以及何时使用？

感谢一百万。

我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form>
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
            <input id="submitNewTaskButton" type="submit" value="+">
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

我的 JavaScript:

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

newTaskInputForm.addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});

最佳答案

<input>元素不会引发 submit事件 - 这是 <form>那does that .

(换句话说，您已将监听器附加到错误的元素)

关于提交时的 JavaScript addEventListener 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60567775/

25 4 0
文章推荐： javascript - 需要为其他表复制脚本而不影响原始脚本
文章推荐： Perl 脚本从两个日期范围之间的日志文件中提取数据，文件中不需要输入日期
文章推荐： docker - 在另一个Nginx负载平衡器之后使用多个Docker Nginx负载平衡器，这是否被认为是不好的做法？
文章推荐： haskell - 因式分解箭头外的箭头 do 表示法是有效的变换吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com