Hi. Thank you for taking the trouble to post this solution. However, I am finding your example somewhat difficult to follow. It would have been very helpful to see a worked example showing the html code and the related eventhandler code so that I could understand exactly what you are working with and translate your example for my website layout. I have never used vanilla JS, coming to javascript via reactJS which is, of course, quite different in many respects...
Also, I found it difficult to determine which terms in your code are javascript terms and which need to be replaced by me with element names, IDs or classes. Again, a fully-worked example would have been very useful here.
I haven't seen the notation 'li#task' before and I and if it is to be replaced by something meaningful in my environment, I am not sure what to replace it with? My event function name?
Also, in the while loop, I am not really sure why you are navigating up the parent elements
In my case, I have a navbar object (flex-container) with individual tiles with id: "linkContainer" and it is to these tiles that I want to add the event handlers, but they are all siblings. I think, anyway, I need to be navigating down if I am starting at the root element. If I start at the root I need to find the flex container first (which is a child of the root element I imagine, and then I will need to find the linkContainer children elements of the flex container. Again, without being able to see the HTML structure you are working with, it is hard to envisage what is happening here.
With regard to the statement (targetElement.matches(linkcontainer)) { It is not clear whether I add a text string with the element.id, as I have done, or just the ID name without quotes? Again a fully-worked example would make that clear.
This is my HTML structure. If you have some suggestions which would help me apply your code to this I would be very thankful.
Home
About
Technology
Marketing
Support
Modules
It is the linkcontainer Tile1 ...Tile6 elements above which require the event handlers.
ReactDOM.render(
,
document.getElementById('root')
Cheers from sunny Sydney
Rapier
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi. Thank you for taking the trouble to post this solution. However, I am finding your example somewhat difficult to follow. It would have been very helpful to see a worked example showing the html code and the related eventhandler code so that I could understand exactly what you are working with and translate your example for my website layout. I have never used vanilla JS, coming to javascript via reactJS which is, of course, quite different in many respects...
Also, I found it difficult to determine which terms in your code are javascript terms and which need to be replaced by me with element names, IDs or classes. Again, a fully-worked example would have been very useful here.
I haven't seen the notation 'li#task' before and I and if it is to be replaced by something meaningful in my environment, I am not sure what to replace it with? My event function name?
Also, in the while loop, I am not really sure why you are navigating up the parent elements
In my case, I have a navbar object (flex-container) with individual tiles with id: "linkContainer" and it is to these tiles that I want to add the event handlers, but they are all siblings. I think, anyway, I need to be navigating down if I am starting at the root element. If I start at the root I need to find the flex container first (which is a child of the root element I imagine, and then I will need to find the linkContainer children elements of the flex container. Again, without being able to see the HTML structure you are working with, it is hard to envisage what is happening here.
With regard to the statement (targetElement.matches(linkcontainer)) { It is not clear whether I add a text string with the element.id, as I have done, or just the ID name without quotes? Again a fully-worked example would make that clear.
This is my HTML structure. If you have some suggestions which would help me apply your code to this I would be very thankful.
Home
About
Technology
Marketing
Support
Modules
It is the linkcontainer Tile1 ...Tile6 elements above which require the event handlers.
ReactDOM.render(
,
document.getElementById('root')
Cheers from sunny Sydney
Rapier