CODEWITHSUNDEEP
javascripthtml
EValo
EValo

Reputation: 19

Javascript To Do List issue

Trying to make a To Do List for a project since I've just started learning JavaScript. Here's the code. 

function newElement() {
  var inputval = document.getElementById('inputnewlist').value;
  var li = document.createElement('li');
  var lichild = document.createTextNode('inputval');

  li.appendchild('lichild');
  if (inputval === '') {
    alert('you must put something in the textbox!');
  } else {
    document.getElementById('mylist').appendchild('li');
  }
  document.getElementById('inputnewlist').value = "";
}

document.getElementsByClassName('addbutton').addEventListener('click', function() {
  newElement();
});
<div id="formcontainer">
  <h2 class="title"> To Do List </h2>
  <label for="inputnewlist"> Add To List</label>
  <input type="text" name="inputnewlist" id="inputnewlist" placeholder="Add thing to do..">
  <button class="addbutton">Add</button>
</div>
<ul id="mylist">
  <li> hi hehe <span class="exit"> x </span></li>
</ul>

The issue is that the button does nothing at all. I already tried using onclick instead of eventlistener but nothing changed. What's wrong with it? I can't see why it won't work to be honest. I hope you guys can help!

Upvotes: 0

Views: 86

Answers (2)

David
David

Reputation: 218950

There's a lot wrong here. But the main issue is that getElementsByClassName returns a collection rather than a single element. So you'll need to loop over that collection to interact with the elements:

let buttons = document.getElementsByClassName('addbutton');
for (let b of buttons) {
  b.addEventListener('click', function() {
    newElement();
  });
}

Aside from that, you have a variety of typos where you're using incorrect function names (JavaScript is case-sensitive, so appendchild should be appendChild) and using strings where you meant to use variables ('li' instead of li, 'lichild' instead of lichild).

I suspect you meant to write this:

function newElement() {
  var inputval = document.getElementById('inputnewlist').value;
  var li = document.createElement('li');
  var lichild = document.createTextNode(inputval);

  li.appendChild(lichild);
  if (inputval === '') {
    alert('you must put something in the textbox!');
  } else {
    document.getElementById('mylist').appendChild(li);
  }
  document.getElementById('inputnewlist').value = "";
}

let buttons = document.getElementsByClassName('addbutton');
for (let b of buttons) {
  b.addEventListener('click', function() {
     newElement();
  });
}
<div id="formcontainer">
  <h2 class="title"> To Do List </h2>
  <label for="inputnewlist"> Add To List</label>
  <input type="text" name="inputnewlist" id="inputnewlist" placeholder="Add thing to do..">
  <button class="addbutton">Add</button>
</div>
<ul id="mylist">
  <li> hi hehe <span class="exit"> x </span></li>
</ul>

Upvotes: 1

Yousaf
Yousaf

Reputation: 29312

document.getElementsByClassName returns a collection, you want to access the first element in the collection

change

document.getElementsByClassName('addbutton').addEventListener(...)

to

document.getElementsByClassName('addbutton')[0].addEventListener(...)

or you could use querySelector which returns the first matching element

document.querySelector('.addbutton').addEventListener(...)

Upvotes: 1

Related Questions