-2

I cannot link to another page with my code for a popup window, so I have to use document.write however it doesn't even open the popup when i click the button. For example, this code works:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<script>alert('test')<\/script>");
myWindow.document.close();
var p = document.createElement("p")
p.innerHTML = "This is the source window!";
opener.document.querySelector("body").appendChild(p)
}
</script>

However, when I add elements such as a divider, it doesn't work. For example:

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<div>
<div id="test">
<p>Test</p>
<br>
</div>
</div>");
myWindow.document.close();
var p = document.createElement("p")
p.innerHTML = "This is the source window!";
opener.document.querySelector("body").appendChild(p)
}
</script>
user3125845
  • 11
  • 6
  • You know a valid HTML document has a DTD, html, head and body elements, and the head is for metacontent like linking a stylesheet, and body is the place where to show the actual content. All those elements have to be created before trying to use them. – Teemu Nov 09 '18 at 12:22
  • Yeah, that's not my full code, just showing the part I need help with. If it helps, the actual popup window won't open. Adding those elements still won't work. It just won't open. – user3125845 Nov 09 '18 at 12:23
  • You can't have literal new lines like that in a double-quoted JavaScript string. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types. You can spot errors like this by checking the console. Also, you would need to escape the quotes within your string, anyway (for example, in `
    `).
     – elixenide Nov 09 '18 at 12:27
  • Even if we take away the syntax errors in you code above, not sure it would still work. Your opening a new window, populating it with html, and then instantly closing it. Your first example will show the window, because you have used alert, and this will block script execution. – Keith Nov 09 '18 at 12:53

1 Answers1

0

There were 2 issues:

1 You used double quotes in a wrong way

myWindow.document.write("<div>
<div id="test">

instead it should be 

myWindow.document.write("<div>
<div id='test'>

2 In JavaScript you can not use line break using double quotes,

this is wrong 

myWindow.document.write("<div>
<div id="test">
<p>Test</p>

it should be 

myWindow.document.write("<div><div id="test"><p>Test</p>....

Finally

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<div><div id='test'><p>Test</p><br></div></div>");
myWindow.document.close();
var p = document.createElement("p")
p.innerHTML = "This is the source window!";
opener.document.querySelector("body").appendChild(p)
}
</script>

Refer to What is the usage of the backtick symbol (`) in JavaScript? if you want to write html in JS

codemirror
  • 3,164
  • 29
  • 42