CODEWITHSUNDEEP
javascriptjqueryclassclick
Musa Toktaş
Musa Toktaş

Reputation: 69

.click() Function doesn't Triggered

Body onload triggers a function called "autoClicker" function to click a selected "span" element. It alerts which mean function is calling normally. I console logged the element which I checked, I'm choosing right. In last step It won't appears to be clicked, because If click happen, below options will be available.

Dears, I couldn't find out why its not click'ing and Im expecting your valuable contributions.

the function I added to theme.js file

$(function autoClicker(){
  console.log("it works!");
  var x = document.getElementsByClassName("variant-text")[0];
  x.click();
});

I want to choose first "variant-text" classed element, you may find in here

This is sneakershop website, I want to automatically choose colors, because there is already one color option in each product and its loading with XML service, we cant change it it refreshes in a specific period.

Any help appreciate it.

Upvotes: 0

Views: 55

Answers (2)

Joey
Joey

Reputation: 492

I think @dave is correct. You're trying to click on the element before it's been generated. setTimeout may work, although I never like using it because you're trying to predict how long it will take for a given element to appear which will not work in every use-case.

There are many ways to accomplish this, but MutationObserver and 'DOMNodeInserted' work. Be advised, DOMNodeInserted is deprecated so MutationObserver is the way to go, although it may not be available in older browsers.

The below worked for me using DOMNodeInserted:

    function init(){
            var containerParent = null, container = null, targetNode = null;

            function Init () {
                container = document.getElementById ("main");
                targetNode = document.getElementsByClassName("variant-text")[0];

                if (targetNode.addEventListener) {
                    targetNode.addEventListener ('DOMNodeInserted', OnNodeInserted);
                }
            }

            function OnNodeInserted(){
                document.getElementsByClassName("variant-text")[0].click()
            }
    };
    init();

Will try to follow up with an example using MutationObserver

Upvotes: 0

dave
dave

Reputation: 64657

I would imagine the issue is that you load theme.js first

<script type="text/javascript" src="//st2.myideasoft.com/idea/hs/56/themes/selftpl_602d7702ef274/assets/javascript/theme.js?revision=7.1.3.2-5-1625248516"></script>
<script type="text/javascript" src="//st2.myideasoft.com/idea/hs/56/themes/selftpl_602d7702ef274/assets/javascript/navigation-menu.js?revision=7.1.3.2-5-1625248516"></script>
<script type="text/javascript" src="//st3.myideasoft.com/idea/hs/56/themes/selftpl_602d7702ef274/assets/javascript/lazyload.min.js?revision=7.1.3.2-5-1625248516"></script>
<script type="text/javascript" src="//st3.myideasoft.com/idea/hs/56/themes/selftpl_602d7702ef274/assets/javascript/jquery.elevatezoom.js?revision=7.1.3.2-5-1625248516"></script>
<script type="text/javascript" src="//st1.myideasoft.com/idea/hs/56/themes/selftpl_602d7702ef274/assets/javascript/product.js?revision=7.1.3.2-5-1625248516"></script>
<script type="text/javascript" src="//st2.myideasoft.com/idea/hs/56/themes/selftpl_602d7702ef274/assets/javascript/rateyo.js?revision=7.1.3.2-5-1625248516"></script>

and most likely the click handler hasn't been attached yet when you simulate the click.

The first thing I would do to verify this, would be something like:

$(function autoClicker(){
  console.log("it works!");
  var x = document.getElementsByClassName("variant-text")[0];
  setTimeout(() => x.click(), 3000);
});

assuming that works, I would find the file that adds the click handler, and make sure you run this after, or just create a new js file that you load last.

Upvotes: 1

Related Questions