Hack Forums
[Javascript] Getting nested elements in DOM Manipulation to create a form - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] Getting nested elements in DOM Manipulation to create a form (/showthread.php?tid=6041765)

Getting nested elements in DOM Manipulation to create a form - bevc - Jan 17, 2020

I'm at one of those moments where you feel yourself sat in your study, lighting your pipe and stroking your beard and considering what would be the correct direction to take.

I have a node application and I have a pug template that are coded up and I'm happy with. The pug template represents one project, and within that are shown related targets (so a one to many relationship - one project can have many targets). This is all to my satisfaction.

What I want to do, is have a user be able to click on the DOM element representing a target, and it open up a popup or something similar, and allow it to be edited. I'm not sure of the best way to do this, and I'm not sure that I've ever done it before. So this is my pug template element for each:

Code
each target in project.targets
               .target__card
                  .target__avatar
                     h6.target__title= target.title
                     input#targetId(type='hidden' value=`${target._id}`)

So I've got my hidden id in there and it's all peachy. I want to be able to click on it and it open a form that can edit it and then submit to my endpoint. But if I have a javascript function like this:

Code
const targetCard = document.querySelector('.target__card')
         
if (targetCard) {
              targetCard.addEventListener('click', async (e) => {
                 const target = document.getElementById('targetId').value
                 console.log('target is ', target)
   })
}

then this is only going to work for the first DOM element. But do I really need to loop through again, in my javascript, or something like that? I'm already looping in the template, and the information is ' just sitting there' already, I can see it. It seems wasteful to loop through it again in a js function, even if I did know the best way to do that (which I'm not sure I do). Is there something obvious that I'm missing? Can I like, embed a form in each element that can simply be hidden and unhidden? That seems a bit wasteful too.

I'd be very grateful if anyone who has more experience of this kind of thing could give me some pointers.

RE: Getting nested elements in DOM Manipulation to create a form - Regalia - Jan 19, 2020

I think ur problem is you don't wanna loop through all ".target__card"s?

You could do
Code
document.body.addEventListener('click', async e => {
    // you really need async here?
    if (e.target.matches('.target__card'))
        console.log('target is ', e.target.value)
)}

But looping through document.querySelectorAll('.target__card') is totally fine. The above function is, however, good for dynamicly added content that is not always there from the beginning on

RE: Getting nested elements in DOM Manipulation to create a form - JordanClutch - Jan 19, 2020

You know how you have in your template:

Code
input#targetId(type='hidden' value=`${target._id}`)

Couldn't you directly add an in-line "onClick" property similar to how you have your "type" and "value" properties?

Edit: I see you're using Pug, there is something called quoted attributes where you can add it https://pugjs.org/language/attributes.html#quoted-attributes