0

i have implemented the google translate tool on my page and i trying to remove a element, so i have it selected properly i think, my solution work well on browser dev tool but when i try to run on my script file, the translate component take some time to load into the HTML and my function not work because can't get the elements in time


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>

    <nav id="navbar">
      <div id="google_translate_element"></div>
    </nav>

    <!-- SCRIPTS -->
  
    <!-- Google translate -->
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  
    <!-- Main stript -->
    <script type="text/javascript" src="../scripts/main.js"></script>

  </body>
</html>

My Js


// Google Translate
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}

So I tried

  let powe = document.querySelector('#google_translate_element')
  powe =  powe.querySelector('.goog-te-gadget')
  powe.childNodes[1].remove()

Then i tried to put into a function and call on load but it does not work too

function remPowered(){
  let powe = document.querySelector('#google_translate_element')
  powe =  powe.querySelector('.goog-te-gadget')
  powe.childNodes[1].remove()
}

document.onload(remPowered())

Im using Vanilla Js for educational purpose

Nicholas Affonso
  • 3
  • 2
  • `document.onload(remPowered())` is meaningless. Did you mean `addEventListener("load", remPowered)`? – Sebastian Simon Nov 03 '22 at 03:33
  • ` ... ` – Matt Clark Nov 03 '22 at 03:34
  • @MattClark Inline event handlers like `onload` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Please _never_ suggest or encourage these attributes. The last browser that still needs them reached end of life nearly two decades ago. – Sebastian Simon Nov 03 '22 at 03:35
  • @SebastianSimon this made sense and worked for me, would you like to put it as an answer so I can mark it as solved? – Nicholas Affonso Nov 03 '22 at 03:56

1 Answers1

0

I'm no js pro but I think if you check if your running from the script and if so add a time delay with something like


function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
//then use this method

console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });
//or

console.log("Hello");
await sleep(2000);
console.log("World!");
Miss Bridget Savells
  • 28
  • 4