Change div's text with a button

Question

I want to create a function that changes my div's text(keep in mind this is only a sample of my code) from greek to English Now I know this may be a possible duplicate but I have searched all over this site to find this and tried multiple stuff

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

Possible duplicate of [How do I replace text inside a div element?](https://stackoverflow.com/questions/121817/how-do-i-replace-text-inside-a-div-element) — Garrison, Oct 06 '19 at 15:23
Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Sebastian Simon, Oct 06 '19 at 15:28
There is no method called `document.getElementByClassName`. There is, however, [`document.getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). Its return value, an [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), doesn’t have a getter property called `innerHtml`. No DOM interface or prototype has such a property. [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element)s, however, have a getter property called [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). — Sebastian Simon, Oct 06 '19 at 15:33
Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Try using the [debugging capabilities](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript) of your browser. — Sebastian Simon, Oct 06 '19 at 15:33
And of course, `innerHTML` isn’t a method; it’s a getter. — Sebastian Simon, Oct 06 '19 at 15:40

norbitrial · Accepted Answer · 2019-10-06T15:43:26.693

One easy solution can be the following:

(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>

Explanation:

Adding for each button id values in order to separate by languages so on click event it can be used to figure out which one the code needs to handle. In the translate function the code assigns the necessary values based on the selected button's id.

Hope this helps!

@scriver What do you mean by really detecting greek language? — norbitrial, Oct 06 '19 at 15:47
I got one problem though What I have in the html div shows up after the textArea — scriver, Oct 06 '19 at 16:30

Change div's text with a button

1 Answers1