Vanilla Javascript find element with attribute on click

Question

I am trying to translate these few lines of jQuery based code into vanilla JS but I am struggling. Can someone please explain how to do it?

  function googletranslate() {
    $(".footer-toggle li, .select-lng li").on("click", function() {
      var rel = $(this).children("a").attr("rel");
      $(".goog-te-menu-frame:first").contents().find(".goog-te-menu2 .goog-te-menu2-item span:contains('" + rel + "')").get(0).click();
    });
  }

  setTimeout(googletranslate, 1000);

I know how to do a click event with javascript but im having a hard time finding the element (Just started learning).

<a href="#" rel="Spanish" title="Spanish">Spanish</a>

Basically when the link is clicked, it feeds through rel value to the hidden google translate widget, and simulates a click on the desired language.

Can someone explain how please? Would it be easier to use a select box and get the value from that instead?

you can use document.querySelector and .querySelectorAll to use complex css selectors like jQuery — George
– George, Commented Mar 24, 2018 at 18:33

connexo · Accepted Answer · 2018-03-24 18:33:57Z

1

document.querySelector('a[rel="Spanish"]')

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

answered Mar 24, 2018 at 18:33

connexo

57.3k15 gold badges112 silver badges150 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2018-03-24 18:59:27Z

0

function googletranslate() {
  ['.footer-toggle li', '.select-lng li'].forEach(selector => {
    const elm = document.querySelector(selector);
    elm.addEventListener('click', clickHandler);
  });

  function clickHandler(e) {
    const rel = e.target.querySelector('a').getAttribute('rel');
    const someGoogleSpan = document.querySelector(".goog-te-menu-frame:first")
      .querySelectorAll(".goog-te-menu2 .goog-te-menu2-item span:contains('" + rel + "')")[0];
    someGoogleSpan.click();
  }
}

setTimeout(googletranslate, 1000);

edited Mar 24, 2018 at 18:59

answered Mar 24, 2018 at 18:37

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

5 Comments

CodeWalker Over a year ago

Thanks for the answer, look's promising but doesn't work. WebPack reported syntax errors, and after fixing those, it says clickHandler is not defined.

CodeWalker Over a year ago

Ah! Well spotted. Getting a new error now, Cannot read property 'addEventListener' of null, which probably means its failing to find the elements?

CertainPerformance Over a year ago

I'm using the selectors you posted in the question, if they don't reflect your HTML structure then you need to figure out which elements you want to select instead. For example <div id="translate-button">Translate</div> then select with '#translate-button'.

CodeWalker Over a year ago

Nothing wrong with the html structure, but i think it will work I keep messing, thanks.

CodeWalker Over a year ago

Seems its only finding the first li element, not all the LI elements

Collectives™ on Stack Overflow

Vanilla Javascript find element with attribute on click

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related