时间戳

首页 > 解决方案 > 使用按钮更改 div 的文本

javascript - 使用按钮更改 div 的文本

问题描述

我想创建一个函数，将我的 div 文本（请记住，这只是我的代码示例）从希腊语更改为英语多个东西

      <button class="one" OnClick="change()">
      English
      </button>
      <button class="two">
      Ελληνικα
      </button>

      <div class="left" Id="left">
                  TEXT.......
                </div>
 function change() {
  document.getElementByClassName("left").innerHtml('fwfewfc');
 }

标签： javascript

解决方案

一种简单的解决方案如下：

(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);
})();
<button id="english" class="one">
  English
</button>

<button id="greek" class="two">
  Ελληνικα
</button>

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

解释：

为每个按钮添加id值以便按语言分隔，因此在单击事件时，它可用于确定代码需要处理哪一个。在 translate 函数中，代码根据所选按钮的 分配必要的值id。

希望这可以帮助！

推荐阅读