3

I am trying - and failing - to write JavaScript to click this button:

button that says click to translate all reviews to english

The HTML for the button varies depending on the page

Example 1

from this page:

<span class="a-button-text" aria-hidden="true" id="a-autoid-8-announce">Translate all reviews to English</span>

Example 2

from this page:

<a href="#customerReviews" class="a-button-text">Translate all reviews to English</a>

Example 3

From this page:

<span class="a-button-text" aria-hidden="true" id="a-autoid-24-announce">Translate all reviews to English</span>

Using the ID tag when it's available gets the desired result

document.querySelector("#a-autoid-8-announce").click()

This works but only on pages where there's a dedicated ID tag—and even when there is one, it can vary. (Sometimes it's #a-autoid-8-announce and sometimes it's a-autoid-24-announce etc.)

Therefore, I want to select using a different method

The only things that are constant are:

  1. the anchor text Translate all reviews to English
  2. the class a-button-text

Me trying to formulate an answer

So, the selectors should be:

  1. a:contains('Translate')
  2. .a-button-text

What I am stuck on

The code I need will (I assume) ultimately look like this:

document.querySelector(1 2).click()

edit: clarification: I mean document.querySelector("a:contains('Translate').a-button-text").click()

I have tried multiple permutations and combinations of the above, and none seem to work. 😩

I have tried, for instance, 2 1 (as well as 1 2), and I have tried putting 1 and 2 in single quotes, double quotes, and no quotes. (Every time I make a small change I hope for it to work, and it doesn't and a small part of me inside dies.)

I am now wondering if I need to write a loop, and this is giving me anxiety since I don't understand them (but I want to learn). Perhaps I don't need to do a loop, as I only need to click one link (if it's there on the page), but perhaps I still need to do it that way?

I am embarrassed asking this, as it's very remedial. I usually get the answer in the end through trial and error and reading guides. But this time the answer eludes me.

Improve this question
6
  • 2
    document.querySelector("1.2").click() would select a 1 tag with a class of 2, such as <1 class="2></1>. This doesn't exist in your code, nor is <1> a valid html tag. What are you expecting this to do and what do 1 and 2 mean in this instance? Commented Nov 13 at 18:04
  • Finding elements on the page by text content is a really bad idea; you never know when somebody will decide to change the wording, or translate the page to French. Commented Nov 13 at 18:08
  • Can you modify the html attributes for this button? Add another class or data- attribute? Commented Nov 13 at 18:47
  • @Pointy It's Amazon UK - it's always the exact same link text (Translate all reviews to English) Commented Nov 13 at 20:10
  • 1
    @Sockie well it's always the same until it isn't; it's much more likely that a site like that would change text intended for site users than it would be for them to change infrastructure stuff in the DOM. Commented Nov 13 at 20:13

1 Answer 1

Reset to default
1

Okay first of all clicking a span probably won't do anything... And if it does maybe it should be a link instead.

But otherwise to answer your question you should first get a list of all elements that fit your initial conditions (like class selection) and then filter that list down by the element's text.

let list = $('.a-button-text').filter(function(elem, index) { //the index param may be first return (elem.innerText == ...); });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is this part in single quotes: (elem.innerText == 'Translate all reviews to English')? Or double quotes : (elem.innerText == "Translate all reviews to English")
Both work the same

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.