Document.write created script does not work

Question

I have a finished JQuery for moving a 360° object (picture) with mouse actions.

The code is working:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#product').j360();
            });
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;"> 
<img src="v/1.png" /> 
<img src="v/2.png" /> 
<img src="v/3.png" /> 
<img src="v/4.png" /> 
<img src="v/5.png" /> 
</div>
</center>
</body>
</html>

The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)

So basically it's like that:

<button id="click1" onclick="myFunction()">click me</button>

<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write('            jQuery(document).ready(func');
document.writeln('tion() {');
document.write("                jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln('            });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">'); 
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>

The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.

Thank for your help!

jesus lol, why you need that many document.writes? How can you even read that — Isaac Vidrine, Mar 04 '19 at 21:40
As you say, using `document.write` (and its ilk) is recommended against, precisely because it does not just work. https://developers.google.com/web/updates/2016/08/removing-document-write — coreyward, Mar 04 '19 at 21:42
There are a number of posts on Stack Overflow regarding the disadvantages of `document.write`, including the canonical [Why is document.write considered a “bad practice”?](https://stackoverflow.com/q/802854/215552) I suggest reading the answers to that question. — Heretic Monkey, Mar 04 '19 at 21:43
As far as what to use instead, take a gander at [What are alternatives to document.write?](https://stackoverflow.com/q/4537963/215552). — Heretic Monkey, Mar 04 '19 at 21:44
*The needed pictures are received on demand from a server* Please precise — Nino Filiu, Mar 04 '19 at 21:49
yes you have to break the script tags, otherwise it won't work ... but it seems like nobody can help with these ancient code style :) — Code_Pfuscher, Mar 05 '19 at 08:16

score 0 · Answer 1 · answered Mar 04 '19 at 22:34

document.write overwrites any code you have.

Example:

function overwrite() {
  document.write("Oops, I've overwritten the code!");
}

<!doctype html>
<html>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <button onclick="overwrite()">Click me!</button>
</body>

</html>

Document.write created script does not work

1 Answers1