Question

由于某种原因，它没有拿起提交。我不知道为什么，我没有错误。我已经检查了拼写错误和标点符号，所以我不确定什么是错的。任何想法都会有很大的帮助！非常感谢！

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

Answer 1

这实际上是正常的。单击“提交”时，将重新加载页面，因此也会重新加载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>

我还没有测试过。

onsubmit功能无法正确加载

1 个答案: