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

非常容易解决：

更改此

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

到这个

var revText = reverse(text);

第一行或多或少是胡言乱语。

Answer 2

问题是您在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>

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

2 个答案: