Java 腳本功能不起作用，如何將我的 javascript 文件添加到 html 並使其工作

Question

我有我的 javascript 文件和代碼，稱為 script.js，我已將其添加到我的 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時，您應該在script.js之前包含Jquery文件。

<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>

您在控制台中遇到的另一個錯誤是 'Cannot read property 'innerHTML' of null' 為此：

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

當元素（在本例中為“totalship”）在您的網頁中不可訪問或不可用並且因此無法讀取其屬性時，就會發生這種情況。 由於您正在訪問一個 id，您可以在此處提供您的 css 文件嗎？ 此外，目前無法通過您的文件訪問通過這些文件（.userInfo、.checkoutForm 等）訪問您的數據庫的位置。

Java 腳本功能不起作用，如何將我的 javascript 文件添加到 html 並使其工作

問題描述

2 個解決方案

解決方案1
0 2019-10-19 02:58:09

解決方案2
0 2019-10-19 04:19:31

Java 腳本功能不起作用，如何將我的 javascript 文件添加到 html 並使其工作

問題描述

2 個解決方案

解決方案1 0 2019-10-19 02:58:09

解決方案2 0 2019-10-19 04:19:31

解決方案1
0 2019-10-19 02:58:09

解決方案2
0 2019-10-19 04:19:31