-1

出于某种原因，它没有接受 onsubmit。我不知道为什么，我没有收到任何错误。我也检查了拼写错误和标点符号，所以我不知道出了什么问题。任何想法都会有很大帮助！非常感谢！

这是我的 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>
    <!-- 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.
4

1 回答 1

0

这其实很正常。当您点击提交时，页面会重新加载，因此 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 脚本中是全局的。所以你的 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>

我没有测试过。

于 2013-10-15T15:46:24.877 回答