OnClick関数は.getElementByIDを使用する場合に一度しか動作しません。

Question

これまでにも同様の質問がありましたが、通常、一部の変数が正しく更新されていないため、毎回同じ結果が返されます。 私は2つのテキストボックスを持つhtmlページを持っています。それらの間にあるボタンは、クリックされると一番上のボックスからテキストを取り込み、それを修正し、変更されたテキストが下のボックスに表示されます。新しいテキストがボックスに入れられても機能が一度しか機能しないのはなぜですか？

document.getElementById('buttonVal').onclick = function(){ 
 
    \t var text = document.getElementById('textbox').value; 
 
     \t var revText = document.getElementById('buttonVal').onclick = reverse(text) 
 
     \t 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 = reverse(text); 

へ

変更この

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

ラインは多かれ少なかれ愚かです。