how to make a function that allows to change the image when selecting in the dropdown of google tran-CodePudding

I'm a bit new to programming and as the title says I wanted to make a function that allowed me to switch between images depending on the text I selected from the google translate dropdown between the id of image1 and image2, allowing me to show an image and hide the another image, but I have no idea how to start.

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'pt',
    autoDisplay: 'true',
    includedLanguages: 'pt,en',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}

<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
<div >
  <header >
    <div >
      <nav >
        <ul >
          <li style="padding-top: 25px;" >
            <div style="margin-right: 140px;" id='google_translate_element'></div>
          </li>
        </ul>
        <a  href="#"><img id="image1" width="300" src="https://static.vecteezy.com/ti/vetor-gratis/t2/567055-icone-de-pessoa-grátis-vetor.jpg" /></a>
        <a  href="#"><img id="image2" width="300" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1AkIYdHRh_fVi-0j0CdCWCZXeEvOIolZQDSf4l-7oewZSOSReebanjktPa_7JE5LxO84&usqp=CAU" /></a>
      </nav>
    </div>
  </header>
</div>

CodePudding user response：

Not really much information about the Google Translate button but what I have found that it contains basic select, something like this. I have created simple CodeSandbox that illustrates the behavior.

Explanation: First of you need to hide every image but one that reflects initial page language and in your case it is Portugal I think. You can do that by creating a CSS class that sets elements display property to none, something like this:

.none {
  display: none;
}

and add this class to every element but one (your initial). And also add id="..." to element not one. Secondly I recommend using something that reflects value from GoogleTranslate select to your images ID's ("optionx" names are just for presentation purposes, in your case it will be languages that you declare in includedLanguages property when initializing Translator ):

const optionsToImagesMap = {
  option1: "image1",
  option2: "image2",
  option3: "image3",
  option4: "image4"
};

Next up you need to create variable that you will use to manipulate images.

let currentImage = document.querySelector("#image1");

currentImage at the start will contain reference to your initial image that you want to display (the one that reflect Portuguese)

You need to create variable that will have reference to that GoogleTranslate select by doing something like this:

const googleTranslateSelect = document.querySelector("#google_translate_element select")

Then you need to add event listener to that GoogleTranslate select do something when language changes:

googleTranslateSelect.addEventListener("change", (e) => {
    //do something
  });

In that eventListener you will hide one image and display other by adding class none from one image, swapping reference to new image and then removing that class from the new currentImage:

googleTranslateSelect.addEventListener("change", (e) => {
    //do something
    currentImage.classList.add("none");
    currentImage = document.querySelector(
      `#${optionsToImagesMap[e.target.value]}`
    );
    currentImage.classList.remove("none");
  });