Question

我正在尝试理解为什么没有使用通过表单输入的值更新选项卡。

该计划由三部分组成：

tasks10.html with form and tasks10.js call
utilities10.js将函数分组到对象U = {...}以创建命名空间。用于填充选项卡的函数名为plusTask。
tasks10.js一个立即调用的函数，其目的是为函数U.plusTask分配'onsubmit'事件

我把声明var tasks = [];在tasks10.js =＆gt;失败; in plusTask =＆gt;失败。在这两种情况下，都不会填充选项卡，索引仍然为0。

HTML

<!doctype html>
<head>
    <title>List</title>
    <link rel="stylesheet" href="css/form.css">
</head>
<body>      
    <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>
            <input type="submit" value="Add It!" id="submit">
            <div id="output"></div>
            <p id='test'> -- </p>
        </fieldset>
    </form>
    <script src="js/utilities10.js"></script>
    <script src="js/tasks10.js"></script>
</body>
</html>

tasks10.js

(function() {   // immediately invoked function
    'use strict';
    //window.addEventListener('onsubmit',U.plusTask,false);
    U.$('theForm').onsubmit = U.plusTask;
})(); // End of anonymous function.

utilities10.js

var U = {
    // For getting the document element by ID:
    $: function(id) {
        'use strict';
        if (typeof id == 'string') {
            //alert("cxcwcw  $"+ id);
            return document.getElementById(id); 
        }
    }, // End of $() function.

    plusTask : function() {
        var tasks = [];

        // Function called when the form is submitted.
        // Function adds a task to the global array.

        function innerCalculate(){
            alert(tasks.length);
            'use strict';

            // Get the task:
            //var task =this.$('task');
             var task =U.$('task'); alert("task : " + task);
            //var task =document.getElementById('task'); 

            // Reference to where the output goes:
            //var output = this.$('output');
            var output = U.$('output');
            //var output = document.getElementById('output');
            alert("in");

            // For the output:
            var message = '';

            if (task.value) {
            U.$('test').innerHTML = tasks.length;
            //document.getElementById('test').innerHTML = tasks.length;
                // Add the item to the array:
                tasks.push(task.value);

                // Update the page:
                message = '<h2>To-Do</h2><ol>';
                for (var i = 0, count = tasks.length; i < count; i++) {
                    message += '<li>' + this.tasks[i] + ' - ' + count + '</li>';
                }
                message += '</ol>';
                output.innerHTML = message;

            } // End of task.value IF.

            // Return false to prevent subssmission:
            return false;

        } // End of innerCalculate
        innerCalculate();

    } // End of plusTask function
} // End of U

Answer 1

plusTask函数在每次调用时都会重置所有局部变量。

我认为您打算使用IIFE创建一个闭包。此外，this.tasks[i]应为tasks[i]。

plusTask : (function() { // IIFE
    var tasks = [];
    function innerCalculate() {
        alert(tasks.length);
        'use strict';
        var task = U.$('task');
        alert("task : " + task);
        var output = U.$('output');
        alert("in");
        var message = '';
        if (task.value) {
            U.$('test').innerHTML = tasks.length;
            tasks.push(task.value);
            message = '<h2>To-Do</h2><ol>';
            for (var i = 0, count = tasks.length; i < count; i++) {
                message += '<li>' + tasks[i] + ' - ' + count + '</li>';
            }
            message += '</ol>';
            output.innerHTML = message;
        }
        return false;
    }
    return innerCalculate; // return closure
})() // invoke plusTask IIFE

Answer 2

在第44行你有：

message += '<li>' + this.tasks[i] + ' - ' + count + '</li>';

但是你想要的任务是封闭的任务，而“这个”是Window。所以你想要：

message += '<li>' + tasks[i] + ' - ' + count + '</li>';

此外，如果你在这里按提交，它将重新加载页面。所以plusTask应该开始这样的事情：

plusTask : function(event) {
    event.preventDefault();
    ...

Answer 3

Bemmu，城堡，干得好！我应该考虑关闭并错过使用它。最终的js代码正在完成这项工作。谢谢你们俩。：

{{1}}

Javascript全局变量和命名空间

3 个答案: