Функция Onclick работает только один раз, при использовании.getElementByID

Question

Другие подобные вопросы, подобные этому, задавались ранее, но ответ обычно заключается в том, что некоторая переменная не обновляется должным образом, и поэтому кнопка каждый раз выдает одни и те же результаты. У меня есть html-страница с двумя текстовыми полями и кнопкой между ними, которая при щелчке мышью берет текст из самого верхнего поля, модифицирует его, а затем измененный текст отображается в нижнем окне. Почему функция работает только один раз, даже когда новый текст помещен в поле?

document.getElementById('buttonVal').onclick = function(){
     var text = document.getElementById('textbox').value;
      var revText = document.getElementById('buttonVal').onclick = reverse(text)
      document.getElementById('revBox').value = revText
    };
    
    function reverse(textString){
        return textString.split("").reverse().join("");
    }

<form>
      <fieldset>
        <legend>text reversal</legend>
        <p>
        Enter text in box below
        <p>
          <label></label>
          <textarea id = "textbox"
                  rows = "10"
                  cols = "120"></textarea>
        <br>
        <p>
        <input type="BUTTON" value="REVERSE" id="buttonVal">
        <br>
        <p>
        Your text backwards is:
        <p>
        <label></label>
          <textarea id = "revBox"
                  rows = "10"
                  cols = "120"></textarea>
      </fieldset>
    </form>

Answer 1

Проблема в том, что вы используете onclick внутри onclick метод. Если вы просто упростите эту строку из var revText = document.getElementById('buttonVal').onclick = reverse(text) (Что также плохо, потому что вы вдвойне назначаете что-то, один из которых является onclick метод) просто var revText = reverse(text); Вы можете избежать некоторой сложности и заставить код работать.

document.getElementById('buttonVal').onclick = function(){
 var text = document.getElementById('textbox').value;
 var revText = reverse(text);
 document.getElementById('revBox').value = revText;
    };
    
    function reverse(textString){
        return textString.split("").reverse().join("");
    }

<form>
  <fieldset>
    <legend>text reversal</legend>
    <p>
    Enter text in box below
    <p>
      <label></label>
      <textarea id = "textbox"
              rows = "10"
              cols = "120"></textarea>
    <br>
    <p>
    <input type="BUTTON" value="REVERSE" id="buttonVal">
    <br>
    <p>
    Your text backwards is:
    <p>
    <label></label>
      <textarea id = "revBox"
              rows = "10"
              cols = "120"></textarea>
  </fieldset>
</form>

Answer 2

Очень легко исправить:

изменить это

var revText = document.getElementById('buttonVal').onclick = reverse(text)

к этому

var revText = reverse(text);

Эта первая строка более или менее бредовая.