ToDoList(Problem)

1

I am in the initial stage of creating a Todolist but facing a problem creating a dynamic list using DOM methods and functions,I shall post the JS code

console.clear();
const BUTTON = document.querySelector('button');
const INPUTFIELD = document.querySelector('input[type = "text"]');
//console.log(INPUTFIELD);
const UL = document.querySelector('.ul1');

INPUTFIELD = window.addEventListener('keypress',() => {
  let list = document.createElement('li');
  let value = INPUTFIELD.value;
  //console.log(value);
  let dynamic = document.createTextNode(value);
  list.append(dynamic);
  UL.apppend(list);
  console.log(UL);
})
2

Need to see HTML to effectively help here…

But what immediately glares out to me is this line:
INPUTFIELD = window.addEventListener('keypress',() => {

did you mean to do this instead??:
INPUTFIELD.addEventListener('keypress',() => {

3

Extra note… you have all sorts of globals going on here. This is bad practice.

Including the all caps variables. /bad

4

Actually I tried

variable.addEventListener()

but its not working so I tried the other way.I have seen many projects where devs define global variables,so is that a bad practice

5

Is it your goal to create a new li every time you press a key?

And yes., globals are bad practice. There’s no reason to ever use them. It’s one of the main reasons const and let were made.

6

Thanks for your time

7

TodoList initial stage

console.clear()


function e(){
  const BUTTON = document.querySelector('button')
const INPUTFIELD = document.querySelector('input[type="text"]')
const UL = document.querySelector('ul')
  let list = document.createElement('li')
  let value = INPUTFIELD.value
  let dynamic = document.createTextNode(value)
  list.append(dynamic)
  UL.appendChild(list)
  if(UL.length > 3){
    console.log("size exceeded");
  }
 // console.log(dynamic);
 //console.log(UL)
  }
BUTTON = window.addEventListener('keydown',e)

One big problem is the UL elements are exceeding the space or container,any suggestions

8

It should have only three list items but its going on creating each time I press the key

9

First of all, it seems like you’re coming from another language where the const keyword creates immutable values and the convention is to capitalize the const name. That’s not how consts work in JS. Consts can have the value they reference change, they just cannot be reassigned to a new reference. We don’t capitalize them in JS land.

Now look at this line:

BUTTON = window.addEventListener('keydown',e)

This says to attach an event listener to the window, listen for when any key is pressed, and call function e, also create a global variable BUTTON to refer to this listener. What you actually want to do is find the button and attach the event listener to that. Assuming we gave our button the class submitBtn and have a function called addItem:

document.querySelector('.submitBtn').addEventListener('click', addItem);

(Give your functions more descriptive names than ‘e’ while you’re at it.)

10

Is this what you’re trying to achieve?

https://jsfiddle.net/kb9aur1v/1/

<div id="sandbox"></div>

const handleInputInput = (evt) => {
  const $lis = document.querySelectorAll('.keys_pressed li');
  if ($lis && $lis.length > 2){
  	return;
  }
  const $ul = document.querySelector('.keys_pressed');
  const $li = document.createElement('li');
  $li.innerText = evt.target.value;
  $ul.append($li);
};

const startSandbox = () => {
  const $input = document.createElement('input');
  $input.setAttribute('type', 'text');
  $input.addEventListener('input', handleInputInput);
  
  const $ul = document.createElement('ul');
  $ul.classList.add('keys_pressed');

  const $sandbox = document.getElementById('sandbox');
  $sandbox.append($input);
  $sandbox.append($ul);
};

const initApp = () => {
  startSandbox();
};

initApp();
11

Yeah,

if(lis && lis.length > 2){}

This is what I’ve been working on,didnt think of this idea