title: HTML body tag appears blank in the browser while it is not empty
body: <p>Please help!</p>
  
  <p>My html body tag appears blank in the browser console while it's not empty. This is happening after I added some javascript tags in the head of my html. It is behaving strange as when I remove all the javascript tags from the head of my html and run my html page in the browser, the javascript code (now removed from the html) appears inside the body tag while it's not even in the entire html. I'm getting frustrated now. Look at my code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; 
  &lt;html lang="en"&gt; 
  &lt;head&gt; 
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="res/styles/w3.css"&gt;
  &lt;link rel="stylesheet" href="res/fonts/icomoon/style.css"&gt;
  &lt;link rel="stylesheet" href="res/styles/searchform.css"&gt;
  
          &lt;link href="res/styles/easy-autocomplete.min.css" rel="stylesheet" type="text/css"&gt;
          &lt;link href="res/styles/easy-autocomplete.themes.min.css" rel="stylesheet" type="text/css"&gt;
          &lt;script src="res/js/jquery.easy-autocomplete.min.js" type="text/javascript" &gt;&lt;/script&gt;
  
          &lt;link href="res/styles/floats.css" rel="stylesheet" type="text/css"&gt;
          &lt;link href="res/styles/main.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;script src="res/js/getMedia.js" type="text/javascript"&gt;&lt;/script&gt;           
      &lt;script src="res/js/jsQR.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      // hide #back-top first
      $("#go-to-top").hide();
  
      // fade in #back-top
      $(function () {
          $(window).scroll(function () {
              if ($(this).scrollTop() &gt; 100) {
                  $('#go-to-top').fadeIn();
              } else {
                  $('#go-to-top').fadeOut();
              }
          });
  
          // scroll body to 0px on click
          $('#go-to-top').click(function () {
              $('#content-base').animate({
                  scrollTop: 0
              }, 800);
              return false;
          });
      });
  
  }); 
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var client;
  var camStream;
  var QRtarget;
  function w3_open() {
      document.getElementById("nav-menu").style.width = "100%";
      document.getElementById("nav-menu").style.opacity = "0.8";
  }
  function w3_close() {
      document.getElementById("nav-menu").style.width = "0";
      document.getElementById("nav-menu").style.opacity = "0";
  }
  function w3_open_cart() {
      document.getElementById("nav-cart").style.width = "100%";
      document.getElementById("nav-cart").style.opacity = "0.85";
  }
  function w3_close_cart() {
      document.getElementById("nav-cart").style.width = "0";
      document.getElementById("nav-cart").style.opacity = "0";
  }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function showDialog(wbtn){
      switch(wbtn){
          case 1:
              $('#div-dialog-cover').fadeIn();
              $('#div-dialog-back').slideDown();
              trackNum();
              dialogCmd = 'tracknum';
              break;
          case 2:
          break;
          case 3:
          break;
          case 4:
              $('#div-dialog-cover').fadeIn();
              $('#div-dialog-back').slideDown();
              genQR();
              dialogCmd = 'genqr';
          break;
          case 5:         
              $('#div-dialog-cover').fadeIn();
              $('#div-dialog-back').slideDown();
              scanQR();
              dialogCmd = 'scanqr';
          break;
          case 6:
              $('#div-dialog-cover').fadeIn();
              $('#div-dialog-back').slideDown();
              loginForm();            
              dialogCmd = 'login';
      }
  }
  function QRfound(QRdata){
      setTimeout(function() {
          closeDialog(QRdata);  // You used `el`, not `element`?
      }, 1000);
  }
  function closeDialog(QRdata = ''){
      if (dialogCmd == 'genqr'){
  
      } else if (dialogCmd == 'scanqr') {
          $('#scanning').hide();
          camStream.getTracks().forEach(track =&gt; track.stop());
          if (QRdata){
              alert(QRdata);
          }
          readingQR = 0;
          $('#canvas').hide();
      }
      $('#dialog-content').html('');
      $('#div-dialog-cover').fadeOut();
      $('#div-dialog-back').slideUp();
  }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var dialogCmd;
  function initVars(){
      client = "c";
  }
  function trackNum(){
      document.getElementById('dialog-label').innerHTML = 'Enter tracking number';
      $('#div-tracker').css('margin-top', '20px');
      $('#dialog-label').css('font-size', '0.8em');
      $('#div-dialog-body').css('max-height', '300px');
      $('#dialog-content').html('&lt;div id="div-tracker"&gt;&lt;form id="form-tracker"&gt;&lt;label for="tracking-num"&gt;Enter tracking Number:&lt;/label&gt;&lt;input id="tracking-input" type="text" name="tracking-num" /&gt;&lt;br&gt;&lt;br&gt;&lt;button id="submit-track" onclick="submitTrack()"&gt;Track now!&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;div&gt;OR&lt;/div&gt;&lt;br&gt;&lt;button id="btn-QR-track" onclick="trackQR()"&gt;Scan a QR to track&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;');
  }
  function scanQR(){
      document.getElementById('dialog-label').innerHTML = 'Aim at a QR';
      $('#div-dialog-body').css('max-height', '350px');
      $('#dialog-content').html('&lt;div id="reader"&gt;&lt;div id="scanning"&gt;&lt;/div&gt;&lt;canvas id="canvas" style="width:266px" hidden&gt;&lt;/canvas&gt;&lt;/div&gt;');
      getCamReady();
  }
  function genQR(){
      $('#dialog-label').css('font-size', '0.7em');   
      $('#dialog-label').css('padding', '0 2px'); 
      document.getElementById('dialog-label').innerHTML = 'Click to regenerate';
      $('#div-dialog-body').css('max-height', '350px');
      $('#dialog-content').html('&lt;div id="qrview" onclick="regenQR()"&gt;&lt;/div&gt;');   
      if (QRtarget == 1){
          $('#qrview').css('background', 'url(&lt;?php require('api/getqr.php?t=1') ?&gt;) no-repeat center center');
      } else if (QRtarget == 2){
          $('#qrview').css('background', 'url(&lt;?php require('api/getqr.php?t=2') ?&gt;) no-repeat center center');       
      }
      $('#qrview').css('background-size', '100%');
  }
  function regenQR() {
      $('#qrview').css('background', ''); 
      if (QRtarget == 1){
          $('#qrview').css('background', 'url(&lt;?php require('api/getqr.php?t=1') ?&gt;) no-repeat center center');
      } else if (QRtarget == 2){
          $('#qrview').css('background', 'url(&lt;?php require('api/getqr.php?t=2') ?&gt;) no-repeat center center');       
      }
      $('#qrview').css('background-size', '100%');
  }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function loginForm(){
      document.getElementById('dialog-label').innerHTML = 'Login here';
      $('#div-dialog-body').css('max-height', '270px');
      $('#dialog-content').html('&lt;div id="form-container"&gt;&lt;form id="login-form"&gt;&lt;label for="username"&gt;Username/Email :&lt;/label&gt;&lt;br&gt;&lt;input id="username" style="width: 220px;margin-left:25px"/&gt;&lt;br&gt;&lt;br&gt;&lt;label for="password"&gt;Password :&lt;/label&gt;&lt;br&gt;&lt;input id="password" type="password" style="width: 220px;margin-left:25px;"/&gt;&lt;br&gt;&lt;br&gt;&lt;a href="#" style="color:blue;float:right;"&gt;Not registered? Click to sign up.&lt;/a&gt;&lt;/form&gt;&lt;/div&gt;&lt;br&gt;&lt;div id="btn-login" onclick="submitLogin()"&gt;Submit&lt;/div&gt;');  
  }
  function submitLogin(){
      var username = document.getElementById('username').value;
      var password = document.getElementById('password').value;
  
      if (username.length == 0) {
          alert('Please enter a username');
          return false;
      }
      if (username.length &lt; 8) {
          alert('Username should be at least 8 characters long.');
          return false;
      }
      if (password.length == 0) {
          alert('Please enter a password');
          return false;
      }
      if (password.length &lt; 6) {
          alert('Password should be at least 6 characters long.');
          return false;
      }   
      var usernameType;
      if (ValidateEmail(username)){
          usernameType = 'email';
      } else {
          if (ValidatePhone(username)){
              usernameType = 'phone';
          } else {
              if (ValidateUsername(username)){
                  usernameType = 'username';
              } else {
                  alert('Invalid username! Please enter a valid e-mail address, phone number or username.');
                  return false;
              }
          }
      }
      if (ValidatePassword(password)){
          return submit(usernameType, username, password);
      } else {
          alert('Invalid password! Please enter a valid password. Valid password is minimum 6 characters long and contains alphabets, digits and special characters e.g. \"@#$%!?\/*-_.|\"');
          return false;
      }   
  }
  function submit(usernameType, username, password){
  
  }
  function ValidateUsername(username){
      return true;
  }
  function ValidatePassword(password){
      return false;
  }
  function ValidatePhone(phone){
      return false;
  }
  function ValidateEmail(mail) {
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)){
      return true;
    }
      return false;
  }
  function trackQR(){
      closeDialog();
      showDialog(5);
  }
  function connectQR(target){
      QRtarget = target;
      w3_close();
      showDialog(4);
  }
  &lt;/script&gt;
  &lt;title&gt;cart&lt;/title&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Sidebar --&gt;
  &lt;div class="w3-sidebar w3-bar-block" id="nav-menu" style="z-index:1006;"&gt;
    &lt;button onclick="w3_close()" class="w3-bar-item w3-button" style="background-color:#430032;font-size:0.9em;"&gt;Close &amp;times;&lt;/button&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;My Account&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;My cart&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;Track my order&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;Feedback &amp; Dispute&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;Invite a Friend&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;About&lt;/a&gt; 
    &lt;a href="#" class="w3-bar-item w3-button"&gt;Contact&lt;/a&gt;   
  &lt;/div&gt;
  &lt;!-- --&gt;
  &lt;!-- cart --&gt;
  &lt;div class="w3-sidebar w3-bar-block" id="nav-cart" style="z-index:1006;"&gt;
    &lt;button onclick="w3_close_cart()" class="w3-bar-item w3-button" style="background-color:#430032;font-size:0.9em;"&gt;Close &amp;times;&lt;/button&gt;
    &lt;div style="width: 100%; height: 5%; background-color:red;font-size:0.7em;padding-left:40px;"&gt;My cart&lt;/div&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;My Account&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;My cart&lt;/a&gt;
    &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 3&lt;/a&gt;
  &lt;/div&gt;
  &lt;!------------&gt;
  &lt;!-- dialog new --&gt;
    &lt;div id="div-dialog-cover"&gt;
    &lt;/div&gt;
      &lt;div id="div-dialog-back"&gt;
          &lt;div id="div-dialog-close-back"&gt;
              &lt;div id="dialog-close-btn"&gt;
                  &lt;span class="icon-cancel-circle" onclick="closeDialog()"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="div-dialog-body"&gt;
              &lt;div id="dialog-label"&gt;&lt;/div&gt;
              &lt;div id="dialog-content" style="text-align:center"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!------------&gt;
  
  &lt;div id="header" class="header"&gt;
  
      &lt;div id="h-top-p"&gt;
          &lt;div id="h-top-menu" class="button" onclick="w3_open()"&gt;
              &lt;div class="icons"&gt;
                  &lt;i class="icon-menu"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="div-wallet"&gt;
              &lt;div class="assets-main-div"&gt;
                &lt;span id="wallet" class="icon-coin-dollar" style="font-size: 1.5em"&gt;&lt;/span&gt;
                &lt;div class="assets-vals-out"&gt;
                  &lt;div class="asset-val-div"&gt;
                    1300
                    &lt;div class="asset-add-div"&gt;
                      +
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="div-orders-left"&gt;
              &lt;div class="assets-main-div"&gt;
                &lt;span id="price-tag" class="icon-price-tags"&gt;&lt;/span&gt;
                &lt;div class="assets-vals-out"&gt;
                  &lt;div class="asset-val-div"&gt;
                    100
                    &lt;div class="asset-add-div"&gt;
                      +
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/div&gt;
      &lt;div id="h-middle"&gt;
          &lt;div id="h-middle-logo"&gt;
              &lt;img id="main-logo" src="res/imgs/title.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="h-bottom"&gt;
          &lt;div id="w-button-container"&gt;
              &lt;div id="w-button-1" class="w-button" onclick="showDialog(1)"&gt;
                  &lt;div class="w-icons"&gt;
                      &lt;span id="w1" class="icon-target2"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="w-button-2" class="w-button"&gt;
                  &lt;div class="w-icons"&gt;
                      &lt;span id="w2" class="icon-document-add"&gt;&lt;/span&gt;
                  &lt;/div&gt;          
              &lt;/div&gt;
              &lt;div id="w-button-3" class="w-button"&gt;
                  &lt;div class="w-icons"&gt;
                      &lt;span id="w3" class="icon-star-full"&gt;&lt;/span&gt;
                  &lt;/div&gt;          
              &lt;/div&gt;
              &lt;div id="w-button-4" class="w-button" onclick="showDialog(4)"&gt;
                  &lt;div class="w-icons"&gt;
                      &lt;span id="w4" class="icon-qrcode"&gt;&lt;/span&gt;
                  &lt;/div&gt;          
              &lt;/div&gt;
              &lt;div id="w-button-5" class="w-button" onclick="showDialog(5)"&gt;
                  &lt;div class="w-icons"&gt;
                      &lt;span id="w5" class="icon-camera"&gt;&lt;/span&gt;
                  &lt;/div&gt;              
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="content-base" class="content-base"&gt;
  
  &lt;/div&gt;
  &lt;div id="footer" class="float-footer"&gt;
      &lt;div class="footer-part"&gt;
          &lt;span class="icon-bell"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="footer-part"&gt;
          &lt;span class="icon-envelope"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="footer-part"&gt;
          &lt;span class="icon-gift"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="go-to-top" onclick="scroll2top()"&gt;
  ^
  &lt;/div&gt;
  &lt;a href="#" class="float" id="menu-share"&gt;
  &lt;i class="icon-chat-bubble-dots"&gt;&lt;/i&gt;
  &lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;
  &lt;i class="icon-phone"&gt;&lt;/i&gt;
  &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;
  &lt;i class="icon-bubbles3"&gt;&lt;/i&gt;
  &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>