多次更改 div 內容

Question

假設我有一些文本，並且我希望每當有人單擊所需語言的按鈕時，該文本就可以更改語言

我一直試圖讓這個 function 工作超過 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-_-contributing-to-open-source向下滾動到地理，當在地理下方單擊這些按鈕時，您會看到內容發生變化我想要這個語言，但我無法從檢查中看出

Answer 1

以下工作正常。 西班牙語中的S在 DOM 中是大寫的，但在 JS 中是小寫的。 而且，比較應該是===而不是!==除非你想做一些我不理解的事情。 在這里修復了這兩件事：

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);
})();

Answer 2

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 3

使用 switch 可能比使用多個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';
}