Why "window.onload" is not working after button click?

Question

After clicking "test html" button, "Done 4" does not show up, only "Done1,2,3"!

Example below:

<!DOCTYPE html>

<textarea style="width:50%;" rows="15" id="TA_1">

<div style="color:red"> test </div>

<script>
window.onload = function(){alert('Done 4');}
alert('Done 1'); 
alert('Done 2'); 
alert('Done 3');
</script>

</textarea>

<br>
<button type="button" onclick='document.write(document.getElementById("TA_1").value)'>Test Html</button>
//Since "document.write()" is called after DOM load, all the document will be re-written (Intended behavior!)

`document.write()` after the page has loaded obliterates the original page completely, including all the scripts associated with it. — Pointy, Jun 14 '19 at 01:00
@Pointy , but "window.onload" is not associated with the original page html, it is associated with the html code inside the "textarea" element — User, Jun 14 '19 at 01:10
Your HTML markup is invalid; a `` should only have plain text in it. And when `document.write()` is called after the page is complete, it implicitly opens a brand new document, obliterating the old page. — Pointy, Jun 14 '19 at 03:31
Sorry @Pointy, but I think you are not understanding the point here! Thanks anyway for trying to help! — User, Jun 14 '19 at 14:39
`document.write` and `window.onload` are both old, deprecated ways of doing things. This question and answer are more likely to confuse new learners going forward, as they are describing fundamentally bad ways of doing things. — Stephen P, Jun 14 '19 at 23:52
@StephenP , deprecated? Where did you find out that information? "document.write" can be used for a lot of things and as far as I know, no, it is not deprecated, neither window.onload! — User, Jun 15 '19 at 02:08
Ok, not officially deprecated — _strongly discouraged_ — but as mentioned in [this answer](https://stackoverflow.com/a/12574149/17300) from **7 _years_** ago, _"deprecated is mostly a state of mind."_, and in [this question](https://stackoverflow.com/q/802854/17300) it was already considered bad practice **10** years ago. Waiting for [DOMContentLoaded](https://stackoverflow.com/a/21814964/17300) is preferred over `onload`, and [DOM Manipulation](https://developer.mozilla.org/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Creating_and_placing_new_nodes) over `document.write` — Stephen P, Jun 17 '19 at 17:16
@StephenP , you wrong! It is neither unofficially deprecated! But yes, like everything in this world, it is strongly discouraged for many situations, but there are others situations where only document.write can shine! — User, Jun 17 '19 at 17:39
I _just_ _**said**_ it is "not officially deprecated" so I not wrong! and I'm agreeing that it is "not _officially_ deprecated" — and what is that outburst about? — Stephen P, Jun 17 '19 at 18:53
@StephenP , Hehe,, when you say that something "is not officially ..." it automatically implies that it "is unofficially ..." ! — User, Jun 17 '19 at 19:16

User · Accepted Answer · 2019-06-14T21:33:04.397

Well, It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually!

So the code below:

onclick='document.write(document.getElementById("TA_1").value);'>Test Html</button>

was changed to:

onclick='document.write(document.getElementById("TA_1").value); document.close();'>Test Html</button>

Final code below (Now "Done 4" shows up after "Done 1,2,3"):

<textarea style="width:50%;" rows="15" id="TA_1">

<!DOCTYPE html>

<div style="color:red"> test </div>

<script>
window.onload = function(){alert('Done 4');}
alert('Done 1'); 
alert('Done 2'); 
alert('Done 3');
</script>

</textarea>

<br>
<button type="button" onclick='document.write(document.getElementById("TA_1").value); document.close();'>Test Html</button>
<br> - Since "document.write()" is called after DOM load, all the document will be re-written (Intended behavior!)
<br> - It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually!

As for the problem regarding calling "window.onload" more than once as shown below:

("Done End" does not show up after "Done 1, 2")

<div style="color:red;"> Original Html </div>

<textarea id="TA_1"> <!-- _________________________________________ -->

<!DOCTYPE html>

<div style="color:green;"> Text Area Html (DOM Re-Written - Original Html Replaced) </div>

<script>
window.onload = function(){alert('Done End');};
alert('Done 1');
alert('Done 2');
</script>

</textarea>

<script>   //________________________________________________________________

window.onload = function(){document.write(document.getElementById("TA_1").value); document.close();};
//Since "document.write()" is called after DOM load, all the document will be re-written
//It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually! 

</script>

The solution is to use "setTimeout()" instead:

("Done End" shows up after "Done 1, 2"):

<div style="color:red;"> Original Html </div>

<textarea id="TA_1"> <!-- _________________________________________ -->

<!DOCTYPE html>

<div style="color:green;"> Text Area Html (DOM Re-Written - Original Html Replaced) </div>

<script>
window.onload = function(){alert('Done End');};
alert('Done 1');
alert('Done 2');
</script>

</textarea>

<script>   //________________________________________________________________

setTimeout(function(){document.write(document.getElementById("TA_1").value); document.close();}, 1);
//Since "document.write()" is called 1 milliseconds after DOM load, all the document will be re-written
//It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually! 

</script>

Why "window.onload" is not working after button click?

1 Answers1