How to create onClick javascript event to change URL

Larson
November 1, 2023
108 views
0 votes
2 Answers

I have wordpress website using GTranslate. As I made Chinese version of the website, I want that when someone click on ‘Chinese’ in drop down menu of GTranslate, I actually send him to new Chinese website. GTranslate plugin developer told me I need to create Javascript onclick event for that. how can i do this please?

When someone select this in drop down of GTranslate:

Chinese (Simplified)

I need to send them to a new URL.
Can you please show me Javascript and how to implement it – where to place script?
Thanks a lot.

Tags: javascript onclick

Answers

- proking
- November 1, 2023 at 11:14 am
- 0 votes
0
add the onclick="newPageFunction(url)"to the chinese button in the dropdown list then try this function
```
function newPageFunction(url) {
window.open(url);
}
```
You should pace the new page url in url variable
Login or Signup to reply.

Here I present a slightly more comprehensive a large list of options in the <select> and an array languages.

Your plugin probably has similar values in the select list but that reference was not provided so I give this generic answer instead.

When a language from the list matches an option and the language isActive is true, then we add an active class to the option and show it via the CSS; effectively hiding all the non-active from the list.

You can modify the JavaScript languages array to activate whichever you have now created on your site – which might even be done somewhat generically.

Now all you have to do is activate languages and put in a proper URL (OR a function to construct a URL generically from your url value which would be my suggestion.

const languages= [  {  value:"AB", url:"Abkhazian", isActive:false },
  {  value:"AA", url:"Afar", isActive:false },
  {  value:"AF", url:"Afrikanns", isActive:false },
  {  value:"SQ", url:"Albanian", isActive:false },
  {  value:"AM", url:"Amharic", isActive:false },
  {  value:"AR", url:"Arabic", isActive:false },
  {  value:"HY", url:"Armenian", isActive:false },
  {  value:"AS", url:"Assamese", isActive:false },
  {  value:"AY", url:"Aymara", isActive:false },
  {  value:"AZ", url:"Azerbaijani", isActive:false },
  {  value:"BA", url:"Bashkir", isActive:false },
  {  value:"EU", url:"Basque", isActive:false },
  {  value:"BN", url:"BengaliBangla", isActive:false },
  {  value:"DZ", url:"Bhutani", isActive:false },
  {  value:"BH", url:"Bihari", isActive:false },
  {  value:"BI", url:"Bislama", isActive:false },
  {  value:"BR", url:"Breton", isActive:false },
  {  value:"BG", url:"Bulgarian", isActive:false },
  {  value:"MY", url:"Burmese", isActive:false },
  {  value:"BE", url:"Byelorussian", isActive:false },
  {  value:"KM", url:"Cambodian", isActive:false },
  {  value:"CA", url:"Catalan", isActive:false },
  {  value:"ZH", url:"ChineseMandarin", isActive:true },
  {  value:"ZN", url:"ChineseSimplified", isActive:true },
  {  value:"CO", url:"Corsican", isActive:false },
  {  value:"HR", url:"Croation", isActive:false },
  {  value:"CS", url:"Czech", isActive:false },
  {  value:"DA", url:"Danish", isActive:false },
  {  value:"NL", url:"Dutch", isActive:false },
  {  value:"EN", url:"EnglishAmerican", isActive:true },
  {  value:"EO", url:"Esperanto", isActive:false },
  {  value:"ET", url:"Estonian", isActive:false },
  {  value:"FO", url:"Faeroese", isActive:false },
  {  value:"FJ", url:"Fiji", isActive:false },
  {  value:"FI", url:"Finnish", isActive:false },
  {  value:"FR", url:"French", isActive:false },
  {  value:"FY", url:"Frisian", isActive:false },
  {  value:"GD", url:"GaelicScotsGaelic", isActive:false },
  {  value:"GL", url:"Galician", isActive:false },
  {  value:"KA", url:"Georgian", isActive:false },
  {  value:"DE", url:"German", isActive:false },
  {  value:"EL", url:"Greek", isActive:false },
  {  value:"KL", url:"Greenlandic", isActive:false },
  {  value:"GN", url:"Guarani", isActive:false },
  {  value:"GU", url:"Gujarati", isActive:false },
  {  value:"HA", url:"Hausa", isActive:false },
  {  value:"IW", url:"Hebrew", isActive:false },
  {  value:"HI", url:"Hindi", isActive:false },
  {  value:"HU", url:"Hungarian", isActive:false },
  {  value:"IS", url:"Icelandic", isActive:false },
  {  value:"IN", url:"Indonesian", isActive:false },
  {  value:"IA", url:"Interlingua", isActive:false },
  {  value:"IE", url:"Interlingue", isActive:false },
  {  value:"IK", url:"Inupiak", isActive:false }, 
  {  value:"GA", url:"Irish", isActive:false },
  {  value:"IT", url:"Italian", isActive:false },
  {  value:"JA", url:"Japanese", isActive:false },
  {  value:"JW", url:"Javanese", isActive:false },
  {  value:"KN", url:"Kannada", isActive:false },
  {  value:"KS", url:"Kashmiri", isActive:false },
  {  value:"KK", url:"Kazakh", isActive:false },
  {  value:"RW", url:"Kinyarwanda", isActive:false },
  {  value:"KY", url:"Kirghiz", isActive:false },
  {  value:"RN", url:"Kirundi", isActive:false },
  {  value:"KO", url:"Korean", isActive:false },
  {  value:"KU", url:"Kurdish", isActive:false },
  {  value:"LO", url:"Laothian", isActive:false },
  {  value:"LA", url:"Latin", isActive:false },
  {  value:"LV", url:"LatvianLettish", isActive:false },
  {  value:"LN", url:"Lingala", isActive:false },
  {  value:"LT", url:"Lithuanian", isActive:false },
  {  value:"MK", url:"Macedonian", isActive:false },
  {  value:"MG", url:"Malagasy", isActive:false },
  {  value:"MS", url:"Malay", isActive:false },
  {  value:"ML", url:"Malayalam", isActive:false },
  {  value:"MT", url:"Maltese", isActive:false },
  {  value:"MI", url:"Maori", isActive:false },
  {  value:"MR", url:"Marathi", isActive:false },
  {  value:"MO", url:"Moldavian", isActive:false },
  {  value:"MN", url:"Mongolian", isActive:false },
  {  value:"NA", url:"Nauru", isActive:false },
  {  value:"NE", url:"Nepali", isActive:false },
  {  value:"NO", url:"Norwegian", isActive:false },
  {  value:"OC", url:"Occitan", isActive:false },
  {  value:"OR", url:"Oriya", isActive:false },
  {  value:"OM", url:"OromoAfan", isActive:false },
  {  value:"PS", url:"PashtoPushto", isActive:false },
  {  value:"FA", url:"Persian", isActive:false },
  {  value:"PL", url:"Polish", isActive:false },
  {  value:"PT", url:"Portuguese", isActive:false },
  {  value:"PA", url:"Punjabi", isActive:false },
  {  value:"QU", url:"Quechua", isActive:false },
  {  value:"RM", url:"RhaetoRomance", isActive:false },
  {  value:"RO", url:"Romanian", isActive:false },
  {  value:"RU", url:"Russian", isActive:false },
  {  value:"SM", url:"Samoan", isActive:false },
  {  value:"SG", url:"Sangro", isActive:false },
  {  value:"SA", url:"Sanskrit", isActive:false },
  {  value:"SR", url:"Serbian", isActive:false },
  {  value:"SH", url:"SerboCroatian", isActive:false },
  {  value:"ST", url:"Sesotho", isActive:false },
  {  value:"TN", url:"Setswana", isActive:false },
  {  value:"SN", url:"Shona", isActive:false },
  {  value:"SD", url:"Sindhi", isActive:false },
  {  value:"SI", url:"Singhalese", isActive:false },
  {  value:"SS", url:"Siswati", isActive:false },
  {  value:"SK", url:"Slovak", isActive:false },
  {  value:"SL", url:"Slovenian", isActive:false },
  {  value:"SO", url:"Somali", isActive:false },
  {  value:"ES", url:"Spanish", isActive:false },
  {  value:"SU", url:"Sudanese", isActive:false },
  {  value:"SW", url:"Swahili", isActive:false },
  {  value:"SV", url:"Swedish", isActive:true },
  {  value:"TL", url:"Tagalog", isActive:false },
  {  value:"TG", url:"Tajik", isActive:false },
  {  value:"TA", url:"Tamil", isActive:false },
  {  value:"TT", url:"Tatar", isActive:false },
  {  value:"TE", url:"Telugu", isActive:false },
  {  value:"TH", url:"Thai", isActive:false },
  {  value:"BO", url:"Tibetan", isActive:false },
  {  value:"TI", url:"Tigrinya", isActive:false },
  {  value:"TO", url:"Tonga", isActive:false },
  {  value:"TS", url:"Tsonga", isActive:false },
  {  value:"TR", url:"Turkish", isActive:false },
  {  value:"TK", url:"Turkmen", isActive:false },
  {  value:"TW", url:"Twi", isActive:false },
  {  value:"UK", url:"Ukranian", isActive:false },
  {  value:"UR", url:"Urdu", isActive:false },
  {  value:"UZ", url:"Uzbek", isActive:false },
  {  value:"VI", url:"Vietnamese", isActive:false },
  {  value:"VO", url:"Volapuk", isActive:false },
  {  value:"CY", url:"Welsh", isActive:false },
  {  value:"WO", url:"Wolof", isActive:true },
  {  value:"XH", url:"Xhosa", isActive:false },
  {  value:"JI", url:"Yiddish", isActive:false },
  {  value:"YO", url:"Yoruba", isActive:false },
  {  value:"ZU", url:"Zulu", isActive:false }];
const choiceList = document.querySelector('select.language-choice');
const options = choiceList.querySelectorAll("option");
options.forEach(function(opt) {
  const selLang = languages.filter(function(lang) {
    return lang.value === opt.value;
  });
  if(selLang.length && !!selLang[0] && selLang[0].value === opt.value){
      const lang = selLang[0];
      opt.classList.toggle("active-choice", lang.isActive );
      opt.dataset.url=lang.url;
  }
});
choiceList.addEventListener('change',function(event){
  const selectedOpt =this.querySelector("option:checked");
  //call a function here to construct a URL and then redirect to that or use the url directly 
  console.log(selectedOpt.value,selectedOpt.textContent, selectedOpt.url);
});

select.language-choice option {
  display:none
}

select.language-choice option.active-choice {
 display:block
}

<select placeholder="Select a Language" class="language-choice">
  <option value="">Select a Language</option>
  <option value="AB">Abkhazian</option>
  <option value="AA">Afar</option>
  <option value="AF">Afrikanns</option>
  <option value="SQ">Albanian</option>
  <option value="AM">Amharic</option>
  <option value="AR">Arabic</option>
  <option value="HY">Armenian</option>
  <option value="AS">Assamese</option>
  <option value="AY">Aymara</option>
  <option value="AZ">Azerbaijani</option>
  <option value="BA">Bashkir</option>
  <option value="EU">Basque</option>
  <option value="BN">Bengali, Bangla</option>
  <option value="DZ">Bhutani</option>
  <option value="BH">Bihari</option>
  <option value="BI">Bislama</option>
  <option value="BR">Breton</option>
  <option value="BG">Bulgarian</option>
  <option value="MY">Burmese</option>
  <option value="BE">Byelorussian</option>
  <option value="KM">Cambodian</option>
  <option value="CA">Catalan</option>
  <option value="ZH">Chinese (Mandarin)</option>
  <option value="CN">Chinese (Simplified)</option>
  <option value="CO">Corsican</option>
  <option value="HR">Croation</option>
  <option value="CS">Czech</option>
  <option value="DA">Danish</option>
  <option value="NL">Dutch</option>
  <option value="EN">English, American</option>
  <option value="EO">Esperanto</option>
  <option value="ET">Estonian</option>
  <option value="FO">Faeroese</option>
  <option value="FJ">Fiji</option>
  <option value="FI">Finnish</option>
  <option value="FR">French</option>
  <option value="FY">Frisian</option>
  <option value="GD">Gaelic (Scots Gaelic)</option>
  <option value="GL">Galician</option>
  <option value="KA">Georgian</option>
  <option value="DE">German</option>
  <option value="EL">Greek</option>
  <option value="KL">Greenlandic</option>
  <option value="GN">Guarani</option>
  <option value="GU">Gujarati</option>
  <option value="HA">Hausa</option>
  <option value="IW">Hebrew</option>
  <option value="HI">Hindi</option>
  <option value="HU">Hungarian</option>
  <option value="IS">Icelandic</option>
  <option value="IN">Indonesian</option>
  <option value="IA">Interlingua</option>
  <option value="IE">Interlingue</option>
  <option value="IK">Inupiak</option>
  <option value="GA">Irish</option>
  <option value="IT">Italian</option>
  <option value="JA">Japanese</option>
  <option value="JW">Javanese</option>
  <option value="KN">Kannada</option>
  <option value="KS">Kashmiri</option>
  <option value="KK">Kazakh</option>
  <option value="RW">Kinyarwanda</option>
  <option value="KY">Kirghiz</option>
  <option value="RN">Kirundi</option>
  <option value="KO">Korean</option>
  <option value="KU">Kurdish</option>
  <option value="LO">Laothian</option>
  <option value="LA">Latin</option>
  <option value="LV">Latvian, Lettish</option>
  <option value="LN">Lingala</option>
  <option value="LT">Lithuanian</option>
  <option value="MK">Macedonian</option>
  <option value="MG">Malagasy</option>
  <option value="MS">Malay</option>
  <option value="ML">Malayalam</option>
  <option value="MT">Maltese</option>
  <option value="MI">Maori</option>
  <option value="MR">Marathi</option>
  <option value="MO">Moldavian</option>
  <option value="MN">Mongolian</option>
  <option value="NA">Nauru</option>
  <option value="NE">Nepali</option>
  <option value="NO">Norwegian</option>
  <option value="OC">Occitan</option>
  <option value="OR">Oriya</option>
  <option value="OM">Oromo, Afan</option>
  <option value="PS">Pashto, Pushto</option>
  <option value="FA">Persian</option>
  <option value="PL">Polish</option>
  <option value="PT">Portuguese</option>
  <option value="PA">Punjabi</option>
  <option value="QU">Quechua</option>
  <option value="RM">Rhaeto-Romance</option>
  <option value="RO">Romanian</option>
  <option value="RU">Russian</option>
  <option value="SM">Samoan</option>
  <option value="SG">Sangro</option>
  <option value="SA">Sanskrit</option>
  <option value="SR">Serbian</option>
  <option value="SH">Serbo-Croatian</option>
  <option value="ST">Sesotho</option>
  <option value="TN">Setswana</option>
  <option value="SN">Shona</option>
  <option value="SD">Sindhi</option>
  <option value="SI">Singhalese</option>
  <option value="SS">Siswati</option>
  <option value="SK">Slovak</option>
  <option value="SL">Slovenian</option>
  <option value="SO">Somali</option>
  <option value="ES">Spanish</option>
  <option value="SU">Sudanese</option>
  <option value="SW">Swahili</option>
  <option value="SV">Swedish</option>
  <option value="TL">Tagalog</option>
  <option value="TG">Tajik</option>
  <option value="TA">Tamil</option>
  <option value="TT">Tatar</option>
  <option value="TE">Telugu</option>
  <option value="TH">Thai</option>
  <option value="BO">Tibetan</option>
  <option value="TI">Tigrinya</option>
  <option value="TO">Tonga</option>
  <option value="TS">Tsonga</option>
  <option value="TR">Turkish</option>
  <option value="TK">Turkmen</option>
  <option value="TW">Twi</option>
  <option value="UK">Ukranian</option>
  <option value="UR">Urdu</option>
  <option value="UZ">Uzbek</option>
  <option value="VI">Vietnamese</option>
  <option value="VO">Volapuk</option>
  <option value="CY">Welsh</option>
  <option value="WO">Wolof</option>
  <option value="XH">Xhosa</option>
  <option value="JI">Yiddish</option>
  <option value="YO">Yoruba</option>
  <option value="ZU">Zulu</option>
</select>

Please signup or login to give your own answer.

Click here to cancel reply.