Help tracking down error

I'm creating a file to experiment with various
options in HTML / JavaScript and have run into
a mysterious problem. Well, mysteriuos to me,
maybe crystal clear for you.


Essentially, in the below HTML, all the browsers
I've tested in and validator seem to think that
the line

          d.writeln('    <script src=cookies.js></script>');

should close the <script> elememt containing the function;
it's as if the d.writln part doesn't exist. I'm truly
baffled.


I've enclosed the whole file below in the hope you can
explain to me the error of my ways.


TIA for any help / guidance you can provide.



Kind regards,


-Steve Comstock

======================================================

<!doctype html>
<!--   Copyright (C) 2020 by Steven H. Comstock            Ver4   -->

<html lang=en>

   <head>

     <meta charset=utf-8>
     <title>Book Club</title>
     <script src=cookies.js></script>

     <script>

       var winCount = 1;

       function signIn()
         {
        var w = window.open("","In"+winCount++, 
"height=200,width=400,menubar=yes,resizeable=yes,scrollbars=yes");

        var d = w.document;

        d.writeln('<!doctype html>');
        d.writeln('<html lang=en>');
        d.writeln('  <head>');
        d.writeln('    <meta charset=utf-8>');
        d.writeln('    <title>Book Club Sign In</title>');
        d.writeln('    <link href=selectStyles.css  rel=stylesheet 
type=text/css>');
        d.writeln('    <script src=cookies.js></script>');
        d.writeln('  </head>');

        d.writeln('<body>');
        d.writeln('<p>Enter your username and click "OK":  ');
        d.writeln('<input type=text size=40 id=unameIn></p>');
        d.writeln('<p>&nbsp;</p>');
        d.writeln('<input type=button value=OK 
onclick="setCookie(\'uname\', 
document.getElementById(\'unameIn\').value);" >');

        d.writeln('');

        d.writeln('</body>');
        d.writeln('</html>');

        d.close();

         }

     </script>

     <style>
       body {background-color: aqua;}
       h1    {font-family: lemon; font-size: 16pt; color: fuchsia;
              text-align: center;}
       p      {font-size: 14pt;}
       .signs {text-align: right; }
       .pt14  {font-size: 14pt; }
     </style>

   </head>

   <body onload="alert(document.cookie);">

     <h1>Welcome to the Flying Drone Academy Book Club</h1>

<!--    <form class=signs id=InUp action=signIn.html>  -->

     <div class=signs id=InUp>
       <button type=button id=In class=pt14
          onclick="signIn(); if (getCookieValue('uname') != '') 
{document.getElementById('booklist').removeAttribute('hidden');}">
          Sign In</button>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <button type=button id=Up class=pt14 onclick="signUp();">Sign 
Up</button>
     </div>

     <p>
      When you sign in, or sign up, you will see the list of
      available books and a link to a page for donating a
      book to the collection
     <p>

     <p id=booklist hidden>
      &nbsp;<br>
      Books available to borrow: &nbsp;&nbsp;
      <select class=pt14>
        <option>Flying Drones Catalog</option>
        <option>Drones Over Colorado</option>
      </select>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <a href=donate.html>Click here to donate a book</a>
     </p>

   </body>

</html>

Received on Thursday, 26 March 2020 13:14:40 UTC