CODEWITHSUNDEEP
javascripthtml
Alice Sloan
Alice Sloan

Reputation: 33

"How do I add items to a list and then add to the empty space below?"

When testing code, any entered value to the list vanishes after pressing "enter".

I am very very new to programming and web development. Please be specific so I can understand.

function addItem(){
  var item = document.getElementsByID("toDoInput").value;
  var text = document.createTextNode("item");
  var li = document.createElement("li");
  newItem.appendChild(text);
  document.getElementsByID("Ordered List").appendChild(newItem);
}



...
 <head>
    <link  rel= "stylesheet" href = "styles.css">
  </head>
  <body>
    <h1> To Do List </h1>
    <form id = "toDoForm">
      <input type = "text" id = "toDoInput">
      <button type = "button" onclick = "addItem()"> Click Me </button>
    </form>
    <ul id = "Ordered List"></ul>
    <script src="toDoList.js"></script>
...

I expect when I enter a word to the list, it will appear down below. Instead, it vanishes.

Any advice would help.

Upvotes: 3

Views: 103

Answers (3)

Kevin Raoofi
Kevin Raoofi

Reputation: 1033

Your code is mostly right.

However, it had a few errors:

  • document.getElementsByID is not valid. It's document.getElementById
  • newItem is not declared. I think you meant li here

Both of these problems will have caused an error that would have made your function stop executing prematurely. You should get familiar with the console in your browser's developer tools and you will see that it will log errors there.

Additionally:

  • document.createTextNode("item") creates a text node with just the text "item". You'll want to use the value from the input box, instead.
  • You should be listening to the submit event, not the onclick event.
    • Unfortunately, you have to call preventDefault on the onsubmit to prevent the page from navigating elsewhere
    • You can trigger the submit event from the form using the button by making the button type submit

Here's a working version of your code:

function addItem(event) {
  event.preventDefault(); // don't let the form POST
  const input = document.getElementById("toDoInput");
  const text = document.createTextNode(input.value);
  const li = document.createElement("li");
  li.appendChild(text);
  document.getElementById("orderedList").appendChild(li);
  input.value = "";
}
<h1>To Do List</h1>
<form id="toDoForm" onsubmit="addItem(event)">
  <input type="text" id="toDoInput">
  <button type="submit">Click Me</button>
</form>
<ul id="orderedList"></ul>

Alternatively, and this is better practice, don't use onsubmit on the markup at all and bind the event using addEventListener:

document.getElementById("toDoForm").addEventListener("submit", addItem);

Upvotes: 1

Vishnu
Vishnu

Reputation: 897

if you want to prevent the enter key action of clearing and submitting the form

function addItem() {

  const input = document.getElementById("toDoInput");
  const text = document.createTextNode(input.value);
  const li = document.createElement("li");
  li.appendChild(text);
  document.getElementById("orderedList").appendChild(li);
  input.value = "";
  
  return false;
}
<form id="toDoForm" onsubmit="return addItem()">
  <input type="text" id="toDoInput">
  <button type="button" onclick="addItem()"> Click Me </button>
</form>
<ul id="orderedList"></ul>

Upvotes: 1

Mino
Mino

Reputation: 994

I think it is unintentional form submit.

When you press enter in form, default behavior is to submit form. Then page will create request to server. In your case, there is no form action attribute, so you will observe page reload.

Possible solutions are:

  • Remove form (use div instead)
  • Disable submit on enter. This code will do the job.

    document.getElementById("YOURFORMNAMEHERE").onkeypress = function(e) {
        var key = e.charCode || e.keyCode || 0;
        if (key == 13) {
            e.preventDefault();
        }
    }

Upvotes: 1

Related Questions