Creating a task creator with HTML and JS-CodePudding

Doing cs50w and I'm on the JS lecture. The assignment is to create a list of tasks, and everything in my code works, except that it doesn't append to the end of the <ul> and create a <li>. document.querySelector('#button').disabled = true still works, but the append(li) doesn't work.

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#submit').disabled = true;

  document.querySelector('#task').onkeyup = () => {
    if (document.querySelector('#task').value.length > 0) {
      document.querySelector('#submit').disabled = false;
    } else {
      document.querySelector('#submit').disabled = true;
    }
  }


  document.querySelector('form').onsubmit = function() {
    const task = document.querySelector('#task').value;
    const li = document.createElement('li');
    li.innerHTML = task;
    document.querySelector('#task').append(li);
    document.querySelector('#task').value = null;

    document.querySelector('#button').disabled = true;
    return false;

  }

});

<h1>Tasks</h1>
<ul id="tasks"></ul>
<form>
  <input type="text" placeholder="Create a new task" id="task">
  <input type="submit" id="submit">
</form>

I tried to fix the code with some friends and they didn't fix it, and I also compared the instructor's code and my own, so I am now asking the internet.

CodePudding user response：

Some selectors were wrong.

Try the following code:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#submit').disabled = true;

  document.querySelector('#task').onkeyup = () => {
    if (document.querySelector('#task').value.length > 0) {
      document.querySelector('#submit').disabled = false;
    } else {
      document.querySelector('#submit').disabled = true;
    }
  }

  document.querySelector('form').onsubmit = function (e) {
    const task = document.querySelector('#task').value;
    const li = document.createElement('li');
    li.innerHTML = task;
    document.querySelector('#tasks').append(li);
    document.querySelector('#task').value = null;

    document.querySelector('#submit').disabled = true;
    e.preventDefault()
    return false;

  }
});

CodePudding user response：

Your code has a few problems:

First, you are using a <form> element, and the default behavior of a <form> is to reload the page whenever it is submitted. Therefore, to use JS with a form, you must use event.preventDefault() to stop this default behavior. This should be the first thing in your onsubmit handler. Note: event.preventDefault() is a method of event, which is passed to your handler as the first argument.

Second, your code has multiple typos, all with document.querySelector(). Throughout your code, you use the wrong selector. In my code below I have fixed all of these mistakes.

Last but not least, you are using li.append() when the correct function is li.appendChild()

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#submit').disabled = true;

  document.querySelector('#task').onkeyup = () => {
    if (document.querySelector('#task').value.length > 0) {
      document.querySelector('#submit').disabled = false;
    } else {
      document.querySelector('#submit').disabled = true;
    }
  }

  document.querySelector('form').onsubmit = function(event) {
    event.preventDefault();
    
    const li = document.createElement('li');
    li.innerHTML = document.querySelector('#task').value;
    document.querySelector('#tasks').appendChild(li);

    document.querySelector('#task').value = '';
    document.querySelector('#submit').disabled = true;
    return false;
  }
});

<h1>Tasks</h1>
<ul id="tasks"></ul>
<form>
  <input type="text" placeholder="Create a new task" id="task">
  <input type="submit" id="submit">
</form>