使用按钮更改div的文本

时间:2019-10-06 15:20:28

标签: javascript

我想创建一个将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');
 }

1 个答案:

答案 0 :(得分:0)

以下是一种简单的解决方案:

(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值,以便按语言分隔,因此在单击事件时,它可以用来确定代码需要处理哪个。在转换功能中,代码根据所选按钮的id分配必要的值。

希望这会有所帮助!