Javascript TypeError，函数不是函数答案

【问题标题】：Javascript TypeError, function is not a functionJavascript TypeError，函数不是函数
【发布时间】：2021-06-05 17:37:13
【问题描述】：

好的，所以我正在学习 Javascript，对于我的第一个小项目，我想制作一个任务组织者。当我第一次单击按钮添加任务时，它会将其添加到页面中，然后当我单击按钮添加另一个任务时，它会引发类型错误。我需要某种循环来捕获错误还是单击按钮时调用函数的问题？

错误

ToDo.html:12 Uncaught TypeError: getTask is not a function
    at HTMLButtonElement.onclick (ToDo.html:12)

HTML

<body>
    <div class='container'>
        <p>Task Tracker</p>
        <input type="text" name="Title" id="taskInput">
        <button onclick="getTask()"> Add Task </button>
        <div class="todo" id="showTask">    
        </div>
    </div>
</body>

Javasript

var getTask;
var task;
function getTask(){
    getTask = document.getElementById("taskInput").value;
    task = getTask;
    console.log(task);
    document.getElementById('showTask').innerHTML = task;
}

【问题讨论】：

HTML 中包含的脚本在哪里？
不能有一个全局函数和一个同名的全局变量。
javascript链接在头部底部，看起来像这样
我没有意识到我将变量命名为与函数名称相同的名称哈哈，但是我改变了它，现在当我按下按钮时，它每次都会起作用，而不是向页面添加新任务，输入的新任务取代了旧任务。

标签： javascript html typeerror

【解决方案1】：

当您在注释中写入时，您命名变量的方式与命名函数的方式相同。您实际上不需要在函数之外初始化变量。对于评论中的第二个问题，您的变量成为新任务，因为您实际上确实替换了变量的全部内容。您需要改用数组。

var task = [];
function getTask(){
    var getTask = document.getElementById("taskInput").value;
    task.push(getTask);
    console.log(task);
    document.getElementById('showTask').innerHTML = task;
}

见第一行var task = [];和第四行task.push(getTask);。

【讨论】：

谢谢，它成功了。并且假设 .push() 方法类似于 python append 方法是否正确？
是的，这是正确的。查看此以获取有关数组的信息developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

getTask 被声明为函数而不是全局变量

// getTask is a function not declare as global variable
        var task;
        function getTask(){
            task = document.getElementById("taskInput").value;;
            console.log(task);
            document.getElementById('showTask').innerHTML = task;
        }

 <div class='container'>
        <p>Task Tracker</p>
        <input type="text" name="Title" id="taskInput">
        <button onclick="getTask()"> Add Task </button>
        <div class="todo" id="showTask">    
        </div>
    </div>

【讨论】：