Javascript TypeError, function is not a function

Question

Ok, so I'm learning Javascript and for my first small project I want to make a task organizer. When I click the button the first time to add a task it adds it to the page, and then when I click the button to add another task it throws a type error. Do I need some kind of loop to catch the error or is the problem calling the function when the button is clicked?

Error

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;
}

You can't have a global function and a global variable with the same name. — Pointy
– Pointy, Commented Mar 7, 2021 at 17:57
The javascript is linked in the bottom of the head and looks like this — scorpio
– scorpio, Commented Mar 7, 2021 at 18:01
I didnt realize I named the variable the same as the function name haha, But I changed that and now when I press the button it will work everytime but instead of adding a new task to the page, the new task entered takes the place of the old one. — scorpio
– scorpio, Commented Mar 7, 2021 at 18:04

Philipp M · Accepted Answer · 2021-03-07 18:09:22Z

1

As you wrote into the comment you named the variable the same way that you named your function. You actually don't need to initialise the variable outside of the function. For your second question in the comment, your variable becomes the new task because you actually do replace the whole content of the variable. You need to use an array instead.

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

See the first line var task = []; and the fourth line task.push(getTask);.

answered Mar 7, 2021 at 18:09

Philipp M

5326 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

scorpio Over a year ago

Thank you, it worked. And is it right to assume that the .push() method is like python append method?

Philipp M Over a year ago

yes that is correct. Check out this for infos on arrays developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Eng_Farghly · Accepted Answer · 2021-03-07 18:13:24Z

1

getTask is declared as a Function not a global variable

// 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>

answered Mar 7, 2021 at 18:13

Eng_Farghly

3,0901 gold badge32 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript TypeError, function is not a function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related