Need help with javascript

[LayZNimrod]

hello sir I'm having a little difficulty with javascript. I am creating extra text and buttons with javascript and that seems to be working fine but when I try to make the buttons interactable I get nothing.

Input buttons created on lines 55 to 74 there types are "submit"

I am trying to get them to return there item indexes first with lines 35 to 44

if any more info is needed ill probably be up until 12

[neilmispelaar]

Hey @LayZNimrod

Great job so far!

I believe the issue you are having is around the type=“submit”

This button type only works if the button is wrapped in a <form>…</form> element.

Since your button elements aren’t wrapped in a form for each todo list item - the check you have to see if they are type is submit could be the problem.

Could you try one of the following to see if it helps:

• remove the type = submit and just check if it’s a “BUTTON” element (event.target.nodeName) in your event handler
• Or add form elements to each to do list item and then your buttons with type submits might work a bit better

Let me know if you have any luck with either of those - and remember - add console.log(“hello”); everywhere to make sure the events and handlers are firing.

[LayZNimrod]

For some reason the buttons are not interactable at all. If I make the buttons inputs they become interactable with the mouse but don't do anything. I forgot the changes in this next push but I tried giving all the buttons data of index i and making the text change to index i (like exercise 19) but it is not working. I am going to stop working for the night though.

Sorry for bothering you on your cruse by the way. I hope I'm not too much trouble.

[neilmispelaar]

https://github.com/imd1005-web-development-winter-2023/assignment-03-LayZNimrod/blob/ea623a1e6421c3c7071b88b5d61ad1fde95abba6/main.js#L78-L84

Hi @LayZNimrod

Going to pass on what I believe could be a clue here:

The above two lines shown are doing the following:

The first lines takes the todoForm element reference and when the todoForm element experiences a submit event the listClickHandler is called.

The second line also takes the todoForm element and when the todoForm element experiences a submit event the addToDoItem is called.

No bother at all! Happy to help where I can.

[LayZNimrod]

ok so i changed it to click again and i added something to the css that makes the buttons glow a different colour but it is still not working

I am pretty sure it is something with this line in the javascript code. It is detecting everything interactable but the buttons and I'm not sure how to make it interact with the buttons.

[LayZNimrod]

I think its because the buttons I'm creating is not part of the todoForm or name but I don't know where it is being made or how to check the whole document for a click (or just the buttons created by the list).

[neilmispelaar]

I think its because the buttons I'm creating is not part of the todoForm

You nailed it! Well done!!!

You can add Event listeners on any item on your page.

The problem you are having is that the buttons that you are creating in your TODO Items aren't part of your TODO Form (and rightly so - they should NOT be part of your TODO Form - TODO Items are there own separate things - most likely in their own UL), so that's why there is no click event that JavaScript is responding to.

The class code example repository https://github.com/imd1005-web-development-winter-2023/class-code-examples/blob/main/class-16/section-a/main.js has an example where we added an event listener to the parent list ul #list-2.

And then any click events inside the list items "bubbled up" to the parent UL and we were able to filter them out using the check below to see if they were buttons that encountered the click events.

// Cache the dom objects #list-2 #message-1
// Create the list hander
// Add the event listeners

const list = document.querySelector("#list-2");
const message = document.querySelector("#message-1");

list.addEventListener("click", updateMessage);

function updateMessage(event) {
  if (event.target.nodeName !== "BUTTON") {
    return;
  }

  const index = event.target.dataset.todo;

  console.log("Clicked", index);

  message.textContent = index;
}

To recap, one way to do this:

• Create a variable to get your parent UL that has all of your todos in list items (you can do this by ID or by query selector)
• Use the addEventListener() method to listen to any "click" events and then run your own custom function
• In your custom function, run console.log(event.target.nodeName); to see what is coming in on different click events
• You should now be able to "listen" to button clicks that occur in your To do list items
• You can then add the logic you need to respond to the button click

[LayZNimrod]

Well the other problem is fixed but I encountered a new one. I forgot the way to delete a specific child with a specific value or something like that. I am looking up websites now and am getting an idea of how to do it.

right now I have this

it works at deleting the first child but I want to use the indexFromDataAttribute to delete a specific button and label alike and I cannot figure out how to do that right now.

it also does not delete them permanently because for some reason they come back when you make a new element.

[neilmispelaar]

Awesome to hear that you have some progress! Celebrate the little wins and the big wins! Well done.

it works at deleting the first child but I want to use the indexFromDataAttribute to delete a specific button and label alike and I cannot figure out how to do that right now.

Have a look at your code using the INSPECTOR to see what HTML is being generated.

What do you notice below?

<ul type="click" class="todo-items">
  <li>Nope</li>
  <button id="click" type="button" value="button 2" data-item-index="1">button 2</button>

  <li>Yes</li>
  <button id="click" type="button" value="button 3" data-item-index="2">button 3</button>

  ...
</ul>

The <button> element isn't being inserted into the <li>.

Start by modifying your renderList(items, itemsList) function so that the <button> element is created and added to the <li> and then only the <li> is added to the <ul>.

This will ensure the <button> is inside the <li> and then when you remove the<li> the child button element will be removed with it!

[neilmispelaar]

it also does not delete them permanently because for some reason they come back when you make a new element.

Remember, the boilerplate code uses a render function that uses the todoArray as a "source of truth" to keep track of the different TODO items.

So, when a new TODO is created, it's added to the array so that when the render function runs it creates and adds all of the different TODOs into the list in a for loop.

The TODO is added to the array here using the push method:

// Handle the event when a user submits the form
function addTodoItem(e) {
  ...
  // Add the user defined entry to our array
  todoArray.push(listEntry);
  // Draw the list of todo
  renderList(todoArray, todoList);
  ...
}

Now, when you delete a TODO, you have to also remove it from the array, so that the "source of truth" stays in sync.

It's like if I kept a separate spread sheet of students on my computer and then someone dropped the class, I would then have to manually do something in my own spread sheet to reflect the change in the class roster.

In this case, you would have to manipulate the array to remove the entry.

[neilmispelaar]

Here is the cool thing:

If you are using the render function strategy, all you really need to do is remove an element from the array.

The next time the render function runs, since that specific item isn't in the array, it won't draw it on the page.

How to try:

• Create a bunch of TODO items
• Add a button on your page that removes just the first array entry (have a look for different array methods on how to remove an item from an array) and then runs the renderList(todoArray, todoList); method to redraw the to do list
• Now when the list is drawn on the page the array item that you removed won't be drawn

[LayZNimrod]

I am having another small problem now where I am trying to add a class to the button so you can mark it as a late task but currently it is not working because... well I don't know. The way I am doing it right now is I am trying to edit the place in the ToDo array just to simply add the class to it.

its giving me this error

I'm not really sure how to fix it. should i take the whole value of the button then replace the button already in the array with a button with the right class in it or can i edit the button using the place in the array directly?

[neilmispelaar]

Hey @LayZNimrod

Remember that your array todoArray is just an array of raw data. It’s data that represents your list of Todos.

This todoArray array is different from the DOM objects (buttons, list items, p, etc.) on your actual web page.

We use the todoArray as a sort of data structure or “database” to store information about our todos.

As a result, you can’t add / remove classes or do DOM manipulation to your array items since the array items are just data.

What you’ll have to do is use document.querySelector() or document.getElementById() to get a reference to the Button and then with that reference you can add / remove classes to the Button.

[neilmispelaar]

const lateButton = document.getElementById(“theButtonId”);
lateButton.classList.add(“buttonlate”);