Learn TypeScript 3 by Building Web Applications

Adding todo items to the list

In order to allow the users to add items to the todo list, you need to add event handlers to the todoInput input and to the Add button.

Go back to index.html and replace the todoInput input with the following code:

<input type="text" id="todoInput" title="What should be added to the todo list?" onblur="addTodo()" /> 

Then, replace the button input with the following:

<input type="button" value="Add todo" onclick="addTodo()" /> 

In the case of todoInput, we have added an onblur event handler; it will be called whenever the user leaves the field. In the case of the button, we have added an onclick handler.

Note that onclick and onblur are just two of many standard browser events. You can find a list of those here: ...