Chrome Extension TypeError issue

1

So I’m working on a Chrome Todo list extension, and I’m having a really weird issue.

image
image764×479 14.3 KB

I don’t know why this isn’t working, is it something specific to Chrome Extensions?

Here’s my html and js for it currently

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2Do</title>
    <link rel="stylesheet" href="popup.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    
  </head>
  <body>
    <script src="popup.js"></script>
    <div id="main" class="container-fluid">
      <div id="title" class="display-1 center">2Do List</div>
      <div id="todo-add-bar" class="form-control-group">
          <input type="text" id="todo" placeholder="Enter a task..." name="todo" class="form-input"></input>
          <button id="addtask">Add task</button>
      </div>
      <div id="task-holder">
        <hr>
        <div id="task"><div>
        </div>
    </div>
  </body>
</html>

JAVASCRIPT:

var addTask = function () {
  var tasksHolder = document.getElementById("task-holder");
  var taskInput = document.getElementsByTagName("input");
  var taskName = taskInput.value;

  var newTask = document.createElement("div");
  newTask.className = "task";

  var taskTitle = document.createElement("div");
  taskTitle.className = "taskTitle";
  taskTitle.innerHtml = taskName;

  newTask.appendChild(taskTitle);

  tasksHolder.appendChild(newTask);
};

var button = document.getElementsByTagName("button");

button.addEventListener("click", addTask());

Thanks!

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.