Get the respective button value in a loop

Photoshop UXP Plugin API
1

Hello! Trying to add a group of dynamic buttons here from an array, the return of querySelectorAll does not seem to get the list of values. Where am I going wrong? Thanks
Here my code:
html:

<div   id="container"></div>

js:

const btns = document.getElementById("container");
const textBtn = [ "btn 1", "btn 2", "btn 3", "btn 4", "btn 5", "btn 6"]
for(i=0; i <textBtn.length;i++){
btns.insertAdjacentHTML('beforeend', `<sp-action-button  class="allbuttons" value="${textBtn[i]}">${textBtn[i]}</sp-action-button>`);  
}

const btn = document.querySelectorAll(".allbuttons")
    for (var i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function (event) {
        //console.log( btn[i]);
        console.log( event.target.value);
        alert(event.target.value)
    });
}
2

Did you check in console what you get for btn? Are your buttons inserted where you expect them to be? Did you try to inspect what’s your HTML after insertAdjacentHTML() loop?

1 Like
3

Hi @Karmalakas thanks for answering, in console all the buttons look correct but return undefined.

Capturar
Capturar655×483 18.2 KB

4

Before starting some UxP projects, I perform some tests in the chrome browser and everything works fine, but without success with the UXP plugin

Capturar
Capturar1224×675 47.3 KB

5

!!! UXP is NOT Chrome !!!
UXP probably doesn’t have half of what Chrome has

Having said that, it works here:

image
image790×907 31.8 KB

Probably in UXP you can’t get Node.value directly and need to access it via attributes

1 Like
6

1- I’m on my cell phone, I haven’t tested it yet, I saw from the print that you found the solution that makes me very happy and grateful.
!!! UXP is NOT Chrome!!!
2 - Yes, I know that, I believe that I, like many here who started in UXP, are migrating from CEP, many of these javascript codes work perfectly in internet browsers as well as in CEP panels.
That said, it’s much easier for you to create a .html file and test some functionality than having to create a UXP plugin for that.
3 - Is this plugin that you use for debugging available in some repository or is this just your domestic resource?
!!!THANKS FOR THE SOLUTION!!!

7

It’s UI Playground - one of sample plugins. I saw months ago @kerrishotts was using some updated version, but this public one hasn’t been updated in years :man_shrugging:

1 Like
8

@Karmalakas Thanks again. This weekend I’m going to dive into the studies, UXP is wonderful. A big hug friend and until my next post