请帮忙！
我的html正文标记在浏览器控制台中显示为空白，但它不为空。在我的html头部添加了一些javascript标签后，就会发生这种情况。它表现得很奇怪，因为当我从我的html头部删除所有的javascript标签并在浏览器中运行我的html页面时，javascript代码（现在从html中删除）出现在body标签内部，而它甚至没有在整个HTML中。我现在感到沮丧。看看我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="res/styles/w3.css">
<link rel="stylesheet" href="res/fonts/icomoon/style.css">
<link rel="stylesheet" href="res/styles/searchform.css">
<link href="res/styles/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
<link href="res/styles/easy-autocomplete.themes.min.css" rel="stylesheet" type="text/css">
<script src="res/js/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>
<link href="res/styles/floats.css" rel="stylesheet" type="text/css">
<link href="res/styles/main.css" rel="stylesheet" type="text/css">
<script src="res/js/getMedia.js" type="text/javascript"></script>
<script src="res/js/jsQR.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#go-to-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 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;
});
});
});
</script>
<script type="text/javascript">
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";
}
</script>
<script type="text/javascript">
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 => track.stop());
if (QRdata){
alert(QRdata);
}
readingQR = 0;
$('#canvas').hide();
}
$('#dialog-content').html('');
$('#div-dialog-cover').fadeOut();
$('#div-dialog-back').slideUp();
}
</script>
<script type="text/javascript">
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('<div id="div-tracker"><form id="form-tracker"><label for="tracking-num">Enter tracking Number:</label><input id="tracking-input" type="text" name="tracking-num" /><br><br><button id="submit-track" onclick="submitTrack()">Track now!</button><br><br><div>OR</div><br><button id="btn-QR-track" onclick="trackQR()">Scan a QR to track</button></form></div>');
}
function scanQR(){
document.getElementById('dialog-label').innerHTML = 'Aim at a QR';
$('#div-dialog-body').css('max-height', '350px');
$('#dialog-content').html('<div id="reader"><div id="scanning"></div><canvas id="canvas" style="width:266px" hidden></canvas></div>');
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('<div id="qrview" onclick="regenQR()"></div>');
if (QRtarget == 1){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=1') ?>) no-repeat center center');
} else if (QRtarget == 2){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=2') ?>) no-repeat center center');
}
$('#qrview').css('background-size', '100%');
}
function regenQR() {
$('#qrview').css('background', '');
if (QRtarget == 1){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=1') ?>) no-repeat center center');
} else if (QRtarget == 2){
$('#qrview').css('background', 'url(<?php require('api/getqr.php?t=2') ?>) no-repeat center center');
}
$('#qrview').css('background-size', '100%');
}
</script>
<script type="text/javascript">
function loginForm(){
document.getElementById('dialog-label').innerHTML = 'Login here';
$('#div-dialog-body').css('max-height', '270px');
$('#dialog-content').html('<div id="form-container"><form id="login-form"><label for="username">Username/Email :</label><br><input id="username" style="width: 220px;margin-left:25px"/><br><br><label for="password">Password :</label><br><input id="password" type="password" style="width: 220px;margin-left:25px;"/><br><br><a href="#" style="color:blue;float:right;">Not registered? Click to sign up.</a></form></div><br><div id="btn-login" onclick="submitLogin()">Submit</div>');
}
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 < 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 < 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);
}
</script>
<title>cart</title>
</head>
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" id="nav-menu" style="z-index:1006;">
<button onclick="w3_close()" class="w3-bar-item w3-button" style="background-color:#430032;font-size:0.9em;">Close ×</button>
<a href="#" class="w3-bar-item w3-button">My Account</a>
<a href="#" class="w3-bar-item w3-button">My cart</a>
<a href="#" class="w3-bar-item w3-button">Track my order</a>
<a href="#" class="w3-bar-item w3-button">Feedback & Dispute</a>
<a href="#" class="w3-bar-item w3-button">Invite a Friend</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
</div>
<!-- -->
<!-- cart -->
<div class="w3-sidebar w3-bar-block" id="nav-cart" style="z-index:1006;">
<button onclick="w3_close_cart()" class="w3-bar-item w3-button" style="background-color:#430032;font-size:0.9em;">Close ×</button>
<div style="width: 100%; height: 5%; background-color:red;font-size:0.7em;padding-left:40px;">My cart</div>
<a href="#" class="w3-bar-item w3-button">My Account</a>
<a href="#" class="w3-bar-item w3-button">My cart</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<!------------>
<!-- dialog new -->
<div id="div-dialog-cover">
</div>
<div id="div-dialog-back">
<div id="div-dialog-close-back">
<div id="dialog-close-btn">
<span class="icon-cancel-circle" onclick="closeDialog()"></span>
</div>
</div>
<div id="div-dialog-body">
<div id="dialog-label"></div>
<div id="dialog-content" style="text-align:center">
</div>
</div>
</div>
<!------------>
<div id="header" class="header">
<div id="h-top-p">
<div id="h-top-menu" class="button" onclick="w3_open()">
<div class="icons">
<i class="icon-menu"></i>
</div>
</div>
<div id="div-wallet">
<div class="assets-main-div">
<span id="wallet" class="icon-coin-dollar" style="font-size: 1.5em"></span>
<div class="assets-vals-out">
<div class="asset-val-div">
1300
<div class="asset-add-div">
+
</div>
</div>
</div>
</div>
</div>
<div id="div-orders-left">
<div class="assets-main-div">
<span id="price-tag" class="icon-price-tags"></span>
<div class="assets-vals-out">
<div class="asset-val-div">
100
<div class="asset-add-div">
+
</div>
</div>
</div>
</div>
</div>
</div>
<div id="h-middle">
<div id="h-middle-logo">
<img id="main-logo" src="res/imgs/title.png">
</div>
</div>
<div id="h-bottom">
<div id="w-button-container">
<div id="w-button-1" class="w-button" onclick="showDialog(1)">
<div class="w-icons">
<span id="w1" class="icon-target2"></span>
</div>
</div>
<div id="w-button-2" class="w-button">
<div class="w-icons">
<span id="w2" class="icon-document-add"></span>
</div>
</div>
<div id="w-button-3" class="w-button">
<div class="w-icons">
<span id="w3" class="icon-star-full"></span>
</div>
</div>
<div id="w-button-4" class="w-button" onclick="showDialog(4)">
<div class="w-icons">
<span id="w4" class="icon-qrcode"></span>
</div>
</div>
<div id="w-button-5" class="w-button" onclick="showDialog(5)">
<div class="w-icons">
<span id="w5" class="icon-camera"></span>
</div>
</div>
</div>
</div>
</div>
<div id="content-base" class="content-base">
</div>
<div id="footer" class="float-footer">
<div class="footer-part">
<span class="icon-bell"></span>
</div>
<div class="footer-part">
<span class="icon-envelope"></span>
</div>
<div class="footer-part">
<span class="icon-gift"></span>
</div>
</div>
<div id="go-to-top" onclick="scroll2top()">
^
</div>
<a href="#" class="float" id="menu-share">
<i class="icon-chat-bubble-dots"></i>
</a>
<ul>
<li><a href="#">
<i class="icon-phone"></i>
</a></li>
<li><a href="#">
<i class="icon-bubbles3"></i>
</a></li>
</ul>
</body>
</html>
答案 0 :(得分：1)
由于第123-163行之间的JavaScript代码而出现问题。确保正确的括号和语法。希望这有帮助。