JavaScript Web: How to Find and Click on a Visible Pseudo Button?

Questions & Suggestions
,
1

I'm studying a JavaScript book that includes a lot of examples/testing online.
All of this is on one page. A number of excercises revealed one at a time.
As you complete one, it hids it, and shows the next.

The "button" shown for "Check your answer" is not a HTML button.
It's an image with an onclick() method. I want to keep my hands on the keyboard, and I have not found any way via the KB to select and press this "button".

So, KM and a little JavaScript to the rescue. Or so I thought.

Here's the web page in question:
http://asmarterwaytolearn.com/js/16.html

Here's the screen:

Here's the HTML for this "button" and the <div> that encloses it:

<!--e00-->

<div id="exercise-16-0" class="unhidden">
  <p style="margin-top:12px;">This code declares an empty array. Complete it.<br />
    <span class="code">var finalScores = ____</span><br />
</p>
  
  <label for="input-16-0">
  <input id=
	"input-16-0"
type="text" class="codeField" size="57">
  <img src="button-check-it.png" class='buttonCheckIt' onmouseover=
"src='button-check-it-hover.png';" onmouseout="src='button-check-it.png';" onclick="checkPattern
(
	/\[\];/,'input-16-0',[16,0]
);">
  </label>
</p>
</div>

This <div> block is repeated n times for the number of questions on this page.

So, how can I click on the "button" that is visible?

I have this JavaScript, but it always clicks on the "button" in the first <div> even when it's not visible.

var aButtons = document.getElementsByClassName('buttonCheckIt');
aButtons[0].click();

I have searched the 'net exhaustively, and can't figure out how to get a ref to the "button" class that is visible.

Can anyone help?
It's a bit*h trying to code complex JavaScript while you're trying to learn it. :smile:

TIA.

2

The difficulty there is that there are are c. 14 elements on that page which all have the class ‘buttonCheckit’, and your script is always finding and clicking the first one.

What the page does is to toggle the class of the enclosing div between hidden and unhidden to present questions to the user one at a time.

If you look up some of the XPATH code in this forum, you should find that you can use document.evaluate() with an XPath like this:

//div[starts-with(@id, 'exercise') and @class='unhidden']/label/img

to find the button for the currently visible question.

If you wanted a second shortcut for the correction button, displayed when the initial answer is not quite right, you could try something like:

//p[starts-with(@id, 'correction') and @class='unhidden']/img
1 Like
3

Thanks, Rob. That should get me started.

Have you ever considered running an online JavaScript class?

4

Not quite my field, alas : - )

( but there are plenty of classes on online – the O’Reilly site is always an interesting point of departure )

5

Rob, you are a genius!

When I use the XPath you provided above

//div[starts-with(@id, 'exercise') and @class='unhidden']/label/img

with your new macro/plugin
Click on the first web page item that matches an XPath

it works like a charm.! :+1:

I really need to study and learn using the XPath notation.

6

Good ! XPath is a great resource – well worth a closer look.

( XQuery too )

7

I have these sites for leaning XPath.
Any others you’d suggest for XPath, and XQuery?

  1. Introduction to using XPath in JavaScript @ mozilla.org
  2. XPath Tutorial @ w3schools.com
1 Like
8

Just a grasshopper watching you wise Gnus graze, but won’t a simple KM “Move or Click Mouse” Action set to a found image work?

Move and Click
At (0,0) from the center of the found image in main screen.
Stop macro and notify on failure.

9

Absolutely – there are various routes to doing this, and the ‘find by image’ action is excellent.

Each tool in the bag has its particular profile – finding by image obviously depends on there being a known and stable image. At a more trivial or puritan level, you may find it’s marginally slower and more energy-consumptive, (a lot of pixels to search through there) but for many things it clearly gives a pretty good balance between scripter time and run-time : - )

10

I considered that, but decided against it for these reasons:

  1. Matching an image can be tricky when the same macro image is trying to match on different screens with different resolutions. In my case I have one Mac setup with 2 very high res monitors while I have another Mac where I just use the laptop screen.
  2. I had a second objective to learn more about JavaScript, so I was trying to build a JS solution.