Question

我完成了名为script.js的javascript文件和代码，并将其添加到HTML文件中。我对此很陌生，不确定自己是否做对了。该功能似乎也不起作用。我很失落，只想溜溜溜弄清楚。谢谢。

这是我的JavaScript文件，名为（script.js）

$(document).ready(function () {
//When add database, will pull total from database
var total = 30;
var totalTax = total * 0.8;
var totalShip = total * 0.3;
var totalAll = total + totalTax + totalShip;
document.getElementById("totalShop").innerHTML = total;
document.getElementById("totalTax").innerHTML = totalTax;
document.getElementById("shipping").innerHTML = totalShip;
document.getElementById("totalDue").innerHTML = totalAll;
});

function applyActiveCss(id) {

for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].id == id) {
        document.links[i].className = 'active';

    }

    else {

        document.links[i].className = 'links';
    }
  }
}

function validateCheckout() {

if (document.checkoutForm.cardNumber.value == "") {
    alert("Please provide card number");
    document.checkoutForm.cardNumber.focus();
    return false;
}

if (document.checkoutForm.month.value == "" || isNaN(document.checkoutForm.month.value) ||
   document.checkoutForm.month.value.length != 2) {
    alert("Please provide your month");
    document.checkoutForm.month.focus();
    return false;
}

if (document.checkoutForm.year.value == "" || isNaN(document.checkoutForm.year.value) ||
   document.checkoutForm.year.value.length != 4) {
    alert("Please provide your month");
    document.checkoutForm.year.focus();
    return false;
  }
 return (true);
}

function validateUserInfo() {

if (document.userInfo.fullname.value == "") {
    alert("Please provide full name");
    document.checkoutForm.cardNumber.focus();
    return false;
}

if (document.userInfo.email.value == "") {
    alert("Please provide your Email!");
    document.userInfo.email.focus();
    return false;
}

var emailID = document.userInfo.email.value;
var atpos = emailID.indexOf("@");
var dotpos = emailID.lastIndexOf(".");

if (atpos < 1 || (dotpos - atpos < 2)) {
    alert("Please enter correct email ID")
    document.userInfo.email.focus();
    return false;
}

if (document.userInfo.zipcode.value == "" || 
 isNaN(document.userInfo.zipcode.value) ||
   document.userInfo.zipcode.value.length != 5) {

    alert("Please provide a zip in the format 12345");
    document.userInfo.zipcode.focus();
    return false;
}
var phoneID = document.userInfo.phone.value;
var dashpos1 = phoneID.indexOf("-");
var dashpos2 = phoneID.lastIndexOf("-");

for (var i = 3; i < 7; i++) {
    phoneID[i] = phoneID[i + 1];
}

for (var j = 6; j < 8; j++) {
    phoneID[j] = phoneID[j + 2];
}

if (document.userInfo.phone.value == "" || 
 document.userInfo.phone.value.length != 12
    || dashpos1 != 3 || dashpos2 != 7 || isNaN(phoneID)) {
    alert("Please provide a phone number in the format 123-456-7890");
    document.userInfo.phone.focus();
    return false;
  }
 return (true);
}

这是我的HTML文件（userinfo.html）的一部分

¿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Personal Information</title>
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">  
</head>

<body>

<script src="script.js"> </script>

<h1>User Information</h1>
<p>Please fill out the following information.</p>
<!--<form class="" action="submit.php" method="post">-->
<form action=".shipinfo.html" name="userInfo" onsubmit="return (validateUserInfo());">
    <table>
        <tbody>
            <tr>
                <td>
                    Full Name: <br>
                    <input type="text" maxlength="100" name="fullname" required>
                </td>
                <td>
                    Phone Number: <br>
                    <input type="number" minlength = "12" maxlength="12" name="phone"  
                           placeholder="123-456-7890">
                </td>
            </tr>
            <tr>
                <td>
                    Address Line 1: <br>
                    <input type="text" maxlength="100" name="add1" required>
                </td>
                <td>
                    Address Line 2: <br>
                    <input type="text" maxlength="100" name="add2">
                </td>
            </tr>
            <tr>
                <td>
                    City: <br>
                    <input type="text" maxlength="100" name="city" required>
                </td>

Answer 1

在使用$ document ready时，您应该在Jquery之前包含script.js文件。

<html>
   <head>
     <script src="jquery.js">
     <script src="script.js">
   </head>
 <body>
   // your html code.
</body>
</html>

查看您的console中的错误。

Answer 2

我在文件中看不到以下jquery脚本（因此它不会读取文档准备就绪的部分，并且您不会在控制台中看到“文档已加载”。

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

您在控制台中遇到的另一个错误是“无法读取null的属性'innerHTML'”：

  document.getElementById("totalShip").innerHTML = total;

当元素（在本例中为“总计”）在您的网页中不可访问或不可用并且因此无法读取其属性时，会发生这种情况。由于您正在访问ID，因此可以在此处提供CSS文件吗？此外，到目前为止，无法通过文件访问通过这些文件（.userInfo，.checkoutForm等）访问数据库的位置。

Java脚本功能不起作用，以及如何将JavaScript文件添加到html并使其起作用

2 个答案: