使用.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

很容易解決：

改變這個

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>