Loop through href using JavaScript

Question

I have an array geneList where loop is applied over it. So, that href will change as loop iterate where hangoutButton will automatically click and redirect to the given url. Sounds Simple

Problem:- Loop is iterating you can see into console that your is iterating but href value is not iterating. It Like href is been stuck on first index only. When page is redirect you will see array of first index into key on every iteration. You can observe key is iterating in console.

Can anyone please help

Thank you in advance........

var geneList= ["123", "456", "678","2345"];
   
geneList.forEach(function(key){
                // GSEA Redirect Button
                var sample= document.createElement('a');
                sample.href = "forEdit3.php?randNum=" + key;
                sample.target = "_blank";
                sample.style.display = "none";
                var samplebutton = document.createElement('button');
                samplebutton .innerHTML = "BarPlot";
                samplebutton .className = "btn";
                samplebutton .id = "autoClickbarPlot";
                forPlot.appendChild(sample);
                sample.appendChild(samplebutton );
                var hangoutButton = document.getElementById("autoClickbarPlot");
                hangoutButton.click();
                console.log(key);
            });

What's the purpose of creating buttons and links and auto-clicking each one right after it's been created? To irritate and confuse the user? — zer00ne
– zer00ne, Commented Jun 8, 2021 at 20:37
suppose you have an array of 10. So, 10 button will be created. Now You will get two option you will on all 10 button manually or you click on single button which will click for you on all 10 button that's why i have added auto-clicking right after it is been created. — aryan vishwakarma
– aryan vishwakarma, Commented Jun 9, 2021 at 4:53
.click() method does not work like that, it's invoked immediately it doesn't wait for a user to trigger click event it triggers without user interaction. — zer00ne
– zer00ne, Commented Jun 9, 2021 at 6:01
Yes, I know. Before this there is single button which will do all this process. I don't want user to click button 10 times. that's why i have added [.click()] — aryan vishwakarma
– aryan vishwakarma, Commented Jun 9, 2021 at 6:20
That's a link you should read. Anyways, it's in a .forEach() which means when each of those links and buttons are being created a click event is fired. Of course this is only true if the code actually worked (which as it looks ATM will not) — zer00ne
– zer00ne, Commented Jun 9, 2021 at 6:39

gugateider · Accepted Answer · 2021-06-08 20:26:46Z

2

The reason why is clicking the first element is that you are using the same ID to multiple elements, so when you set hangoutButton will always return the first item as you are trying to select by the ID.

To make it work you concatenate your key value to the element ID.

Something like this:

sampleButton.id = "autoClickbarPlot_" + key;

and then

var hangoutButton = document.getElementById("autoClickbarPlot_" + key);

This should be enough for you to select your desired hangoutButton

answered Jun 8, 2021 at 20:26

gugateider

2,0872 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loop through href using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related