使用 .getElementByID 时，Onclick 函数只工作一次

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

第一行或多或少是乱码。

使用 .getElementByID 时，Onclick 函数只工作一次

Onclick function only works once, when using .getElementByID

html

javascript

onclick

getelementbyid