Changing button text depending on href

Question

I'm trying to change some button text depending on the country in the slug, for example "fr" for France. This function is only picking up the first Meer laden no matter what. Any idea what I'm missing?

  window.onload = function(){
            if(window.location.href.indexOf("nl") > -1){                
              var x = document.getElementsByClassName('juicer-button')[0];
              x.innerHTML = "Meer laden";      
            }
            else if(window.location.href.indexOf("de") > -1){                
              var y = document.getElementsByClassName('juicer-button')[0];
              y.innerHTML = "Mehr laden";      
            }
            else if(window.location.href.indexOf("fr") > -1){
              var z = document.getElementsByClassName('juicer-button')[0];
              z.innerHTML = "Charger plus";      
            }
            else if(window.location.href.indexOf("it") > -1){                
              var a = document.getElementsByClassName('juicer-button')[0];
              a.innerHTML = "Carica altro";      
            }
            else{''}
          }

well, what is the content of `window.location.href` in this situation? Maybe is always contains "nl" somewhere in the URL? — ADyson, May 15 '19 at 23:06
If it only picks up the first one, it means that your url always contains the slug "nl". — tcj, May 15 '19 at 23:11
Code like that shouldn't have to rely on the URL; there are much better ways of reading the language. If the server adds the language like `` for instance. — , May 15 '19 at 23:16
`document.getElementsByClassName('juicer-button')[0]` << [No, no, no!](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) Just use: `document.querySelector(".juicer-button")`. — Scott Marcus, May 15 '19 at 23:20
And, don't use `.innerHTML` when there is no HTML in your string (as there are performance and security implications). Use `.textContent` for that. — Scott Marcus, May 15 '19 at 23:22

score 1 · Answer 1 · answered May 15 '19 at 23:48

Details commented in demo

/**
 *countrySlug(url)
 *@ Params: url {string} 
 */
//A Get the part after the last `/`
//B Array of countries
//C Array of text for button
//D match will be the index number of country that matches the slug
//E Apply that index number to find the corresponding string in the text array
const countrySlug = url => {
  let slug = url.split('/').pop(); //A
  const countries = ['nl', 'de', 'fr', 'it']; //B
  const text = ["Meer Laden", "Mehr Laden", "Charger Plus", "Carica Altro"]; //C
  let match = countries.indexOf(slug); //D
  return text[match]; //E
}

/*
document.querySelector() to find an #id, .class, tag, etc.
.textContent to set/get text within an element (tag)
*/
document.querySelector('.btn').textContent = countrySlug('https://example.com/de');

<button class='btn'></button>

score 1 · Answer 2 · answered May 16 '19 at 00:36

this regex is not the hardest thing to do:

window.onload = function()
{
  const CountryText = { 'nl': 'Meer laden'
                      , 'de': 'Mehr laden'
                      , 'fr': 'Charger plus'
                      , 'it': 'Carica altro' };

  let CountryRef = window.location.href.match(/nl|de|fr|it/g);

  if(CountryRef)
  {
    document.querySelector(".juicer-button").textContent = CountryText[CountryRef[0]];
  }
}

Changing button text depending on href

2 Answers2