3

I asked this question and I did get one useful piece of information from Kelvin Schoofs that querySelect was a better approach to selection so I implemented it.

var bc = document.querySelectorAll('button.link.event-detail__event-information__event-name-status__grouped-match');
for (var b of bc){
        if(b.ariaExpanded=="false"){
            b.click();
        }
}

However, selection is not my issue and no one is answering the question I continue to try to ask. So let me try it in pictures.

Img1 shows this page with a bunch of chevrons pointing up to indicate that those rows can be expanded with more information and also note the border between rows. Img2 shows the initiation of the first of 53 click events I want to initiate. Img3 shows the results of the script. Notice that all the chevrons now point up to indicate that the row has been expanded and the borderline has been eliminated between rows but nothing else. Img4 shows an example of the information that should have appeared and does when I physically click.

I stepped into the site code as far as I could follow it. I confirmed that it was identifying the correct element and button and collecting the proper data (sport, date, etc.) to retrieve the information but it never gets inserted into the page. One nugget of code made me wonder if these clicks did not create a sequential queue like I would expect and that executing so many so quick might have meant that each one cancelled out the previous one. But when I executed the click for just one row, the behavior was the same (chevron flips and border disappears but no data).

As I was trying to work through the site code there was a routine (ft(e) and Un() if anyone is actually going to look) where various physical mouse data is collected (client/screenX/Y, key states, etc.). So I will try one last time to ask the question I keep asking. Is there something that could be differentiating a script click from a physical one? If so, is there a workaround?

I have lost most of the use of my hands and it is very helpful for me to be able to automate interactions with web pages. This was always easy with VB6/IE. But, of course, this doesn't work anymore with a whole lot of HTML5 websites. So I am trying to learn JavaScript but I don't want to waste my time if this kind of automation is not going to be possible anymore.

I would really appreciate help.

janobody
  • 31
  • 3
  • Does it actually execute the click? May you try putting a console log in the if statement too? – evolutionxbox Aug 08 '21 at 22:18
  • 1
    In the example you linked there is no button matching your conditions on the `className` – Guerric P Aug 08 '21 at 22:20
  • when manually clicked, the button graphic flips upside down (to indicate clicking will contract) and the area is expanded with additional stuff. The click in the snippet merely causes the graphic to flip but no additional stuff appears. I don't understand why a "programatic click" would give different behavior than a manual one. – janobody Aug 08 '21 at 22:44
  • when I display that page there are matching buttons (50 something) and those graphics are flipped when the code is executed. – janobody Aug 08 '21 at 22:47
  • I think you might find some useful information [here (vanilla JavaScript)](https://stackoverflow.com/q/11127908/14201528), [here (jQuery)](https://stackoverflow.com/q/7635274/14201528), [here (jQuery again)](https://stackoverflow.com/q/6674669/14201528) – secan Aug 11 '21 at 15:48
  • That's potentially very helpful but why when I search 'difference physical script click' do none of those show up in the results? – janobody Aug 11 '21 at 16:10
  • And how do I give credit to the person who pointed me to the answer? – janobody Aug 11 '21 at 16:29
  • I do not know why those links did not appear in your search result; I found them via a research on Google for "_javascript discriminate between physical click event and programmatic click_". Anyway, the main point is that now you have some relevant information you can use. You can give credit to the guys who wrote the useful answers by clicking on the arrow/triangle above the votes count, in the top left corner of each answer. If you meant me, instead, no need to give any credit; I just pointed you towards other people's answers. – secan Aug 11 '21 at 17:04

1 Answers1

1

For me, the className for the buttons you wanted had another class in it, explaining why the .className=="... failed.

You could use a CSS selector to identify the button using some classes:

document.querySelectorAll('button.link.event-detail__event-information__event-name-status__grouped-match')

This means your code is resistant to the site suddenly adding new classes (or using a different order). For me it added a link--using-mouse class for example.

Kelvin Schoofs
  • 8,323
  • 1
  • 12
  • 31
  • As I stated, I have limited skills so I don't know why on my computer 54 buttons are selected by that className and clicked by the code. I have a basic idea what you are saying can happen during page generation. At least on my computer I do not have a selection problem. Were you able to find and click the buttons via script and did they expand and fill in? This is the behavior difference I am trying to solve/understand. – janobody Aug 08 '21 at 23:08
  • document.querySelectorAll('button.link.event-detail__event-information__event-name-status__grouped-match').length = 0 Again, I appreciate the response but can you share any working code I can learn from? – janobody Aug 09 '21 at 00:17