My code for appending an item onto a ul isnt working javascript

Question

I have put this js code into visual studio and it wont work. Please help:

var task = document.getElementById('action');
var button = document.getElementById('button');
var err = document.getElementById('err');
var list = document.getElementById('tasks');

button.addEventListener("click", function() {
  if (task.value == "") {
    err.style.backgroundColor = 'red';
    err.innerHTML = "Please enter a value";
  } else {
    var newItem = document.createElement("li");
    newItem.innerHTML = task.nodeValue;
    list.appendChild(newItem);
    err.style.backgroundColor = "none";
    err.innerHTML = "";
    task.nodeValue = "";
  }
})

<header id="header" style="background-color:green;">
  <div id="title">To-Do</div>
  <div id="date"></div>
</header>
<br>
<hr>
<div id="mains">
  <p id="err"></p>
  <label for="text">Task: </label>
  <input type="text" id="action" name="text" placeholder="Wash the dishes..."><br>
  <button id=button>Add</button>
  <ul id="tasks"></ul>
</div>

when i press 'add' nothing happens the text remains and ul is unchanged i tried to copy from a post but that also didnt work but was essentially the same as shown above

@Spectric when i type stuff into the tebox and press add nothing happens — blitzthecoder, Aug 03 '21 at 19:43
Um, if main.js holds this JavaScript code, you bind the event before the element exists and should have an error in the console. — epascarello, Aug 03 '21 at 19:52
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Aug 03 '21 at 19:54
`empty
` needs to be commented. Is that in the real code or a copy ing error? — Barmar, Aug 03 '21 at 19:57
@blitzthecoder replacing the `nodeValue` with `value` should work though... https://jsfiddle.net/369Lpcfq/1/ unless you have other issues with your js, that are not present in the code you're showing there. In that case this question does not have a minimum reproducable example — SkillGG, Aug 03 '21 at 20:04

Roman Azarov · Answer 1 · 2021-08-03T20:09:31.027

0

I guess, the problem in this line:

 newItem.innerHTML = task.nodeValue;

It will work if you'll replace task.nodeValue with task.value;

According to the documentation your task.nodeValue will be always null. And moreover, in your code the "if" statement checks task.value

edited Aug 03 '21 at 20:09

answered Aug 03 '21 at 20:04

Roman Azarov

101
8

[*"replacing nodeValue with value doesnt work so"*](https://stackoverflow.com/questions/68641928/my-code-for-appending-an-item-onto-a-ul-isnt-working-javascript?noredirect=1#comment121309413_68641928) - this is clearly not the problem. – Spectric Aug 03 '21 at 20:56
just check a fiddle from SkillGG's answer. It works – Roman Azarov Aug 03 '21 at 22:15

My code for appending an item onto a ul isnt working javascript

1 Answers1