Writing content to new windows

Question

I am trying to open a new window with this code and assigning the variables to it, what am I doing wrong?

function writeToDocument() {
  var textColor, backColor, pageTitle;
  var yourText, pageContent, docWindow;

  textColor = prompt("Please enter a text color:", "white");
  backColor = prompt("Please enter a background color:", "black");
  pageTitle = prompt("The page will be titled: ", "Default Title");
  yourText = prompt("Add content to the new document:", "page content");

  pageContent = "<html><head><title>";
  pageContent += pageTitle + "</title>";
  pageContent += "<script>alert('The page ' + document.title + ' was created: ' + 
    document.lastModified) < /script>";
  pageContent += "</head><body><strong>";
  pageContent += "</strong></body></html>";

  var newWindow;

  newWindow = open("", "docWin", "location=1");
  newWindow.document.open();
  newWindow.document.write(pageContent);
  newWindow.document.write(background-color= backColor, color= textColor));
  newWindow.document.close(); // Write your code here
}

I have tried multiple tutorials, but none of the methods worked.

See https://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write for how to include literal `` inside a script. — Barmar, Feb 02 '21 at 17:17
`newWindow.document.write(background-color= backColor, color= textColor));` seems to be missing quotes. And it's not clear what you expect to happen by writing that to the document after `pageContent`. — Barmar, Feb 02 '21 at 17:20
im trying to assign the values from the prompt in the variables to the style properties — Vitor Vieira, Feb 02 '21 at 17:21
where do i add that style tag? and thank you very much for your help :) — Vitor Vieira, Feb 02 '21 at 17:25
You would include it in the `` in your `pageContent` string. — Barmar, Feb 02 '21 at 17:26
`pageContent` is a full HTML document, so you fill it in just as you would if you were creating a page in a text editor. — Barmar, Feb 02 '21 at 17:27
got it. now the issue is the code isn´t opening a new window — Vitor Vieira, Feb 02 '21 at 17:53
thats all done and working fine now. thank you so much for the help, this has been bothering me for days — Vitor Vieira, Feb 02 '21 at 18:05

score 0 · Answer 1 · answered Feb 02 '21 at 18:01

You can build your HTML using a template literal string. It will make it easier to see your HTML structure.

The document.title variable will not be available when the alert gets called, so I used pageTitle instead.

function writeToDocument() {
  let textColor, backColor, pageTitle, yourText;

  textColor = prompt("Please enter a text color:", "white");
  backColor = prompt("Please enter a background color:", "black");
  pageTitle = prompt("The page will be titled ", "Default Title");
  yourText  = prompt("Add content to the new document:", "Page content");

  const pageContent = `
    <html>
      <head>
        <title>${pageTitle}</title>
        <style type="text/css">
          body {
            background-color: ${backColor};
            color: ${textColor};
          }
        </style>
        <script type="text/javascript">
          window.addEventListener('DOMContentLoaded', () =>
            alert('The page "${document.title || pageTitle}" was created: ${document.lastModified}')
          );
        <\/script>
      </head>
      <body>
        <h1>${yourText}</h1>
      </body>
    </html>
  `;

  const newWindow = window.open("", "docWin", "location=1");

  newWindow.document.open();
  newWindow.document.write(pageContent);
  newWindow.document.close();
  newWindow.document.title = pageTitle;
}

writeToDocument();

Writing content to new windows

1 Answers1