Does this cause event bubbling and is it an issue?

JavaScript
1

Hi all!

I have my project here:
https://github.com/cmb347827/interactive-comments-section-main

Notice my html generated code in my js files lines 56-60:

<div class='js-display-outer-reply'></div>
<div class='d-flex justify-content-end'>
    <button type='button' class='js-outer-cancel hidden'>Cancel</button>
</div>

and the js code lines 186-205:

document.querySelectorAll(".js-outer-reply").forEach((btn,index)=>{
		btn.addEventListener("click", ()=>{
			//The currentUser has clicked the 'reply' button
			showReplyArea(index,'outer');
			document.querySelectorAll('.js-outer-cancel').forEach((btn,innerIndex)=>{
				if(index===innerIndex){
				   //show associated hidden cancel button beneath reply area of the pressed reply button comment
				   $(btn).addClass('show');
				}
				btn.addEventListener('click',()=>{
					//if multiple replies with cancel buttons are opened at once, another cancel button can be clicked than the one associated
					//with the outer index
                    if(index===innerIndex){
						//the check to see if index===innerindex ensures that the clicked cancel button corresponds to the outer index reply.
						hideElement(btn);
						hideReplyArea(index,'outer');
					}
				});
		   });
		});
	});

Now I’m wondering if this code could cause event bubbling issues?
The html buttons aren’t nested, but where I handle the buttons in js is .

Also, do I need to be concerned the same way about Aria issues with js generated hmtl code? What would be most important Aria wise to pay attention to?

Thanks

2

Did you pass this coding challenge, event bubbling is just the order by which code is ran and not an error.

javascript - What is event bubbling and capturing? - Stack Overflow

1 Like
3

I know it’s not an error, but I was wondering if I’m supposed to handle event bubbling in my code or not ? (maybe with event.stopPropagation() or event.preventDefault() ) .
This area of coding is still very vague to me.

Also, I’m trying to use localStorage to save updates etc.
But I’m unsure if I’m on the right track.

Maybe some hints would be good.
Thanks

4

Yeah, I just did that: open the console to the browser by left clicking and application-more tools-localStorage and its all there but you may need to use JSON.code(example) at least the challenge on here did.

Learn localStorage by Building a Todo App: Step 55 | freeCodeCamp.org

1 Like
5

Could someone please take a look at my code , see if I’m on the right track when it comes to localStorage ? I’m trying to save an update (line 262) , but off course it’s not working.

I’m very new to using localStorage. I just would like to know if I’m on the right track at least , and maybe some hint would be helpful.

Thanks!

6

Here is some of the code in this modual:

Learn localStorage by Building a Todo App

 const myTaskArr = [
  { task: "Walk the Dog", date: "22-04-2022" },
  { task: "Read some books", date: "02-11-2023" },
  { task: "Watch football", date: "10-08-2021" },
];

localStorage.setItem("data", JSON.stringify(myTaskArr));

localStorage.clear();

const getTaskArr = localStorage.getItem("data")
console.log(getTaskArr)

const getTaskArrObj = JSON.parse(localStorage.getItem("data"));
console.log(getTaskArrObj);

You might want to go through this to get a better idea about localStorage and its uses.

JavaScript Algorithms and Data Structures (Beta) Certification | freeCodeCamp.org

8

Hi, thanks for you reply.
Did you look at my code? Because I would just like to know if I’m on the right track or if it looks totally wrong?
saveToStorage() seems to do nothing. I’m using it in the displayMessages() function and on line 266.

Thanks!

9

I’m thinking I have to redo it all, as I can’t get it to work as it is.
Can someone please take a look at my code?
I just want to know if I’m on the right track to make updates/add/delete comments in displayMessages() and use localstorage.

I just would like a hint or such.
Thanks

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.