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

Question

Other similar questions like this have been asked before, but the answer is usually that some variable is not being updated properly and therefore the button yields the same results each time. I have an html page with two text boxes, and a button between them which when clicked, takes in text from the topmost box, modifies it, and the modified text is then displayed in the bottom box. Why does the function work only once even when new text is placed in the box?

 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

Very easy fix:

change this

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

to this

var revText = reverse(text);

That first line is more or less gibberish.

Answer 2

The issue is that you are using onclick inside an onclick method. If you just simplify that line from var revText = document.getElementById('buttonVal').onclick = reverse(text) (Which is also bad because you are doubly assigning something, one of which is an onclick method) to just var revText = reverse(text); you can avoid some complexity and make the code work.

 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>