Изменить содержимое div несколько раз

Question

Предположим, у меня есть текст, и я хочу, чтобы этот текст менял язык всякий раз, когда кто-то нажимает кнопку с желаемым языком

Я пытался заставить эту функцию работать более чем в 2 случаях https://jsfiddle.net/scriv/1j0tm32k/25/

(function() {
    const englishButton = document.getElementById('english');
    const greekButton = document.getElementById('greek');
    const translate = (lang) => {
        const textArea = document.getElementById('left');

        if (lang === 'english') {
            textArea.innerHTML = 'Text original in english';
        } else if (lang === 'greek') {
            textArea.innerHTML = 'same in greek';
        }
    }
    const handleEvent = function() {
        translate(this.id);
    };

    englishButton.addEventListener('click', handleEvent);
    greekButton.addEventListener('click', handleEvent);
})();

https://insights.stackoverflow.com/survey/2019#developer -profile -_- вклад в открытый исходный код Прокрутите вниз до географии, и вы увидите, что содержимое меняется, когда эти кнопки нажимаются ниже географии Я хочу это для языков, но я не могу сказать по проверке

Answer 1

HTML:

<button id="english" data-language="english" class="one">English</button>
<button id="greek" data-language="greek" class="two">Ελληνικα</button>
<button id="spanish" data-language="spanish" class="tres">Spanish</button>
<div class="left" id="left">Text original in english</div>

JavaScript:

(function () {
  const englishButton = document.getElementById('english');
  const greekButton = document.getElementById('greek');
  const espButton = document.getElementById('spanish');

  const translate = (lang) => {
    const textArea = document.getElementById('left');

    if (lang === 'greek') {
      textArea.innerHTML = 'Text original in greek';
    } else if (lang === 'english') {
      textArea.innerHTML = 'Text original in english';
    } else if (lang === 'spanish') {
        textArea.innerHTML = "Text original in spanish";
    }
  }

  const handleEvent = function () {
    translate(this.dataset.language);
    alert(this.dataset.language);
  };

  englishButton.addEventListener('click', handleEvent);
  greekButton.addEventListener('click', handleEvent);
  espButton.addEventListener('click', handleEvent);
})();

Answer 2

Может быть лучше использовать переключатель, чем несколько if else

Что-то вроде

switch (lang) {
  case 'greek' : textArea.innerHTML = 'Text original in greek';
  break;
  case 'spanish' : textArea.innerHTML = 'Text original in spanish';
  break;
  default : textArea.innerHTML = 'Text original in english';
}

Answer 3

Следующее работает нормально. S в spani sh в DOM заглавными буквами, а в JS - строчными. И сравнения должны быть ===, а не !==, если вы не пытаетесь сделать что-то, чего я не понимаю. Исправлены эти 2 вещи здесь:

HTML:

<button id="english" class="one">
  English
</button>
<button id="greek" class="two">
  Ελληνικα
</button>
<button id="spanish" class="tres">
 Spanish
</button>

<div class="left" id="left">Text original in english</div>

JS:

(function() {
  const englishButton = document.getElementById('english');
  const greekButton = document.getElementById('greek');
  const EspButton = document.getElementById('spanish');
  const translate = (lang) => {
    const textArea = document.getElementById('left');

    if (lang === 'english') {
      textArea.innerHTML = 'Text original in english';
    } else if (lang === 'greek') {
      textArea.innerHTML = 'same in greek';
    } else if (lang === 'spanish') {
      textArea.innerHTML = "spanish";
    }
  }
  const handleEvent = function() {
    translate(this.id);
  };

  englishButton.addEventListener('click', handleEvent);
  greekButton.addEventListener('click', handleEvent);
  EspButton.addEventListener('click', handleEvent);
})();