多次更改div内容

Philip 发表于 Dev

菲利普

假设我有一些文本，并且我希望该文本在有人单击具有所需语言的按钮时更改语言

我一直试图让这个功能在 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向下滚动到地理，你会看到当点击地理下方的这些按钮时内容会发生变化我想要这个语言，但我无法从检查中分辨出来

手拉手

以下工作正常。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);
})();

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。