提交函数无法正确加载

onsubmit function not loading properly

本文关键字：加载 函数 提交      更新时间：2023-09-26

由于某种原因，它没有选择提交。我不知道为什么，我没有收到任何错误。我也检查了拼写错误和标点符号，所以我不确定出了什么问题。任何想法都会有很大的帮助！多谢！

这是我的网页

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>To-Do List</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <!-- tasks.html -->
    <form action="#" method="post" id="theForm">
        <fieldset><legend>Enter an Item To Be Done</legend>
            <div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
            <div><label for="priority">Priority</label> <select name="priority" id="priority">
                <option value="high">High</option>
                <option value="normal" selected>Normal</option>
                <option value="low">Low</option>
            </select></div>
            <input type="submit" value="Add It!" id="submit">
      <div id="output"></div>
        </fieldset>
    </form>
    <script src="js/tasks.js"></script>
</body>
</html>

这是 JavaScript

function Task(name, priority) {
    'use strict';
    this.name = name;
    this.priority = priority;
    this.completed = false;
    this.toString = function() {
        return this.name + ' (' + this.priority + ')';
            };
} // End of Task function.
Window.onload = function(){
    'use strict';
    var task = document.getElementById('task');
    var priority = document.getElementById('priority');
    var output = document.getElementById('output');
    var tasks = [];
    document.getElementById('theForm').onsubmit = function() {
        var t = new Task(task.value, priority.value);
        tasks.push(t);
        output.innerHTML = 'There are now <b>' + tasks.length + '</b> item(s) in the to-do list. Just added:<br>' + t.toString();
            return false;
    }; // End of onsubmit anonymous function.
}; // End of onload anonymous function.
这

其实很正常。当您单击提交时，页面将被重新加载，因此 js 脚本也会重新加载。这就像一个新的干净的页面。要做你想做的事，你需要更换你的按钮：

<input type="submit" value="Add It!" id="submit">

跟：

<input type="button" value="Add It!" id="submit" oncick="submit();">

在此之前，您需要调用您的 js 脚本并放入：

function submit(){
       var task = document.getElementById('task');
       var priority = document.getElementById('priority');
       var output = document.getElementById('output');
        var t = new Task(task.value, priority.value);
        tasks.push(t);
        output.innerHTML = 'There are now <b>' + tasks.length + '</b> item(s) in the to-do list. Just added:<br>' + t.toString();
            return false;
    }

并且您的变量任务需要在 js 脚本中是 gobal。所以你的js脚本文件看起来像：

function Task(name, priority) {
    'use strict';
    this.name = name;
    this.priority = priority;
    this.completed = false;
    this.toString = function() {
        return this.name + ' (' + this.priority + ')';
            };
} // End of Task function.
var tasks = [];
 function submit(){
    'use strict';
    var task = document.getElementById('task');
    var priority = document.getElementById('priority');
    var output = document.getElementById('output');
        var t = new Task(task.value, priority.value);
        tasks.push(t);
        output.innerHTML = 'There are now <b>' + tasks.length + '</b> item(s) in the to-do list. Just added:<br>' + t.toString();
            return false;
    }

和你的 html 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>To-Do List</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
<script src="js/tasks.js"></script>
    <!-- tasks.html -->
    <form action="#" method="post" id="theForm">
        <fieldset><legend>Enter an Item To Be Done</legend>
            <div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
            <div><label for="priority">Priority</label> <select name="priority" id="priority">
                <option value="high">High</option>
                <option value="normal" selected>Normal</option>
                <option value="low">Low</option>
            </select></div>
            <input type="button" value="Add It!" id="submit" oncick="submit();">
      <div id="output"></div>
        </fieldset>
    </form>
</body>
</html>

我还没有测试过。

相关文章：