个人中心
gpt4 book ai didi

javascript - 将 .js 文件链接到 .html 文件

转载 作者：行者123 更新时间：2023-12-03 11:04:20 25 4
gpt4 key购买 nike

我正在构建一个具有验证和计算功能的订单。文件夹中有两个文件； 1)index.html 和 2)app.js。 .html 和 .js 文件位于同一文件夹中。我一生都无法成功地将 .js 文件链接到 .html 文件!我在这里阅读了无数的帖子，我发现的唯一建议是将 .html 文件链接到 jquery 库(我就是这样做的)。我还通过在 .js 文件顶部键入测试消息来测试 .js 文件，看看它是否正确链接。结果;没有联动!这是代码:

对于 .html 文件:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>Order Form</title>
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
     <link rel="stylesheet" href="style.css">
     <script src="modernizr.js"></script>
     <script type="text/javascript" src="app.js"></script>
</head>
<body>
     <form name="order" method="post" action="/submit">
    <h1>Order Form</h1>
    <fieldset>
        <legend>Contact Details</legend>
        <ul>
        <li>
            <label class="required">
            <div>Full Name</div>
            <input name="name" required autofocus>
            </label>
        </li>
        <li>
            <label class="required">
            <div>Email Address</div>
            <input type="email" name="email" required>
            </label>
        </li>
        <li>
            <label>
            <div>Postal Address</div>
            <input name="address1" placeholder="Address Line 1">
            </label>
            <div>&nbsp;</div>
            <input name="address2" placeholder="Address Line 2">
            <div>&nbsp;</div>
            <input name="city" class="city" placeholder="Town/City">
            <input name="state" class="state" placeholder="State">
            <input name="zip" class="zip" placeholder="Zip Code">
            <div>&nbsp</div>
            <select name="country">
            <option value="0">Country</option>
            <option value="US">United States</option>
            <option value="CA">Canada</option>
            </select>
        </li>
        <li>
            <label>
            <div>Home Phone No.</div>
            <input type="tel" name="homephone">
            </label>
    </li>
    <li>
        <label>
        <div>Cell Phone No.</div>
        <input type="tel" name="cellphone">
        </label>
    </li>
    <li>
        <label>
        <div>Skype Name</div>
        <input name="skype">
        </label>
    </li>
    <li>
        <label>
        <div>Twitter</div>
        <span class="twitter_prefix">@</span>
        <input name="twitter" class="twitter">
        </label>
    </li>
     </ul>
</fieldset>
<fieldset>
    <legend>Login Details</legend>
    <ul>
    <li>
        <label class="required">
        <div>Password</div>
        <input type="password" name="password" required>
        </label>
    </li>
    <li>
        <label class="required">
        <div>Confirm Password</div>
        <input type="password" name="confirm_password" required>
        </label>
    </li>
    </ul>
</fieldset>
<fieldset>
    <legend>Order Details</legend>
    <table>
    <thead>
    <tr>
        <th>Product Code</th><th>Description</th><th>Qty</th><th>Price</th>
        <th>Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
        COMP001
        <input type="hidden" name="product_code" value="COMP001">
        </td>
        <td>The Ultimate Smartphone</td>
        <td>
        <input type="number" data-price="399.99" name="quantity" value="0"
        min="0" max="99" maxlength="2">
        </td>
        <td>399.99</td>
        <td>
        <output name="item_total" class="item_total">$0.00</output>
        </td>
    </tr>
    <tr>
        <td>
        COMP002
        <input type="hidden" name="product_code" value="COMP002">
        </td>
        <td>The Ultimate Tablet</td>
        <td>
        <input type="number" data-price="499.99" name="quantity" value="0"
        min="0" max="99" maxlength="2">
        </td>
        <td>499.99</td>
        <td>
        <output name="item_total" class="item_total">$0.00</output>
        </td>
    </tr>
    <tr>
        <td>
        COMP003
        <input type="hidden" name="product_code" value="COMP003">
        </td>
        <td>The Ultimate Netbook</td>
        <td>
        <input type="number" data-price="299.99" name="quantity" value="0"
        min="0" max="99" maxlength="2">
        </td>
        <td>299.99</td>
        <td>
        <output name="item_total" class="item_total">$0.00</output>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">Order Total</td>
        <td>
        <output name="order_total" id="order_total">$0.00</output>
        </td>
    </tr>
    </tfoot>
    </table>
</fieldset>
<fieldset>
    <legend>Payment Details</legend>
    <ul>
    <li>
        <label class="required">
        <div>Name on Card</div>
        <input name="card_name" required>
        </label>
    </li>
    <li>
        <label class="required">
        <div>Credit Card No.</div>
        <input name="card_number" pattern="[0-9]{13,16}"
        maxlength="16" required title="13-16 digits, no spaces">
        </label>
    </li>
    <li>
        <label class="required">
        <div>Expiry Date</div>
        <input type="month" name="card_expirty" maxlength="7"
        placeholder="yyyy-mm" required value="2015-06">
        </label>
    </li>
    <li>
        <label class="required">
        <div>CVV2 No.</div>
        <input name="card_cvv2" class="cvv" maxlength="3" pattern="[0-9]{3}"
        required title="exactly 3 digits">
        <span>(Three digit code at back of card)</span>
        </label>
    </li>
     </ul>
</fieldset>
        <div class="buttons">
            <input type="submit" value="Submit Order">
            <input type="submit" id="saveOrder" value="Save Order" formnovalidate formaction="/save">
        </div>
 </form>

对于 .js 文件:

(function() {
    var init=function() {
    var orderForm=document.forms.order,
        saveBtn=document.getElementById('saveOrder'),
        saveBtnClicked=false;

    var saveForm=function() {
        if(!('formAction' in document.createElement('input'))) {
        var formAction=saveBtn.getAttribute('formaction');
        orderForm.setAttribute('action', formAction);
        }
        saveBtnClicked=true;
    };

saveBtn.addEventListener('click', saveForm, false);
};

var qtyFields=orderForm.quantity,
    totalFields=document.getElementsByClassName('item_total'),
    orderTotalField=document.getElementById('order_total');

var formatMoney=function(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var calculateTotals=function() {
    var 1=0,
        ln=qtyFields.length,
        itemQty=0,
        itemPrice=0.00,
        itemTotal=0.00,
        itemTotalMoney='$0.00',
        orderTotal=0.00,
        orderTotalMoney='$0.00';

    for(; i<ln; i++) {
       if(!!qtyFields[i].valueAsNumber) {
          itemQty=qtyFields[i].valueAsNumber || 0;
       } else {
           itemQty=parseFloat(qtyFields[i].value) || 0;
       }

       if(!!qtyFields[i].dataset) {
           itemPrice=parseFloat(qtyFields[i].dataset.price);
       } else {
           itemPrice=parseFloat(qtyFields[i].getAttribute('data-price'));
       }

       itemTotal=itemQty*itemPrice;
       itemTotalMoney='$'+formatMoney(itemTotal.toFixed(2));
       orderTotal+=itemTotal;
       orderTotalMoney='$'+formatMoney(orderTotal.toFixed(2));

       if(!!totalFields[i].value) {
           totalFields[i].value=itemTotalMoney;
           orderTotalField.value=orderTotalMoney;
       } else {
           totalFields[i].innerHTML=itemTotalMoney;
           orderTotalField.innerHTML=orderTotalMoney;
       }
    }
};

CalculateTotals();

var qtyListeners=function() {
    var i=0,
        ln=qtyFields.length;

    for(; i<ln; i++) {
        qtyFields[i].addEventListener('input', calculateTotals, false);
        qtyFields[i].addEventListener('keyup', calculateTotals, false);
    }
};

qtyListeners();

var doCustomValidity=function(field, msg) {
    if('setCustomValidity' in field) {
        field.setCustomValidity(msg);
    } else {
        field.validationMessage=msg;
    }
};

var validateForm=function() {
    doCustomValidity(orderForm.name, '');
    doCustomValidity(orderForm.password, '');
    doCustomValidity(orderForm.confirm_password, '');
    doCustomValidity(orderForm.card_name, '');

    if(orderForm.name.value.length < 4) {
        doCustomValidity(
            orderForm.name, 'Full Name must be at least 4 characters long'
        );
    }

    if(orderForm.password.value.length < 8) {
        doCustomValidity(
            orderForm.password,
            'Password must be at least 8 characters long'
        );
    }

    if(orderForm.password.value !=orderForm.confirm_password.value) {
        doCustomValidity(
            orderForm.confirm_password,
            'Confirm Password must match Password'
        );
    }

    if(orderForm.card_name.value.length < 4) {
        doCustomValidity(
            orderForm.card_name,
            'Name on Card must be at least 4 characters long'
        );
    }
};

orderForm.addEventListener('input', validateForm, false);
orderForm.addEventListener('keyup', validateForm, false);

window.addEventListener('load', init, false);
})();

任何和所有的意见/建议将不胜感激。提前致谢!

这是更新(更正)的代码:

index.html:(没有对该文件进行任何更改；只是取出了 Modernizr.js 链接和 .css 链接)

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>Order Form</title>
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
     <script type="text/javascript" src="app.js"></script>
</head>
<body>
     <form name="order" method="post" action="/submit">
    <h1>Order Form</h1>
    <fieldset>
    <legend>Contact Details</legend>
    <ul>
    <li>
        <label class="required">
        <div>Full Name</div>
        <input name="name" required autofocus>
        </label>
    </li>
    <li>
        <label class="required">
        <div>Email Address</div>
        <input type="email" name="email" required>
        </label>
    </li>
    <li>
        <label>
        <div>Postal Address</div>
        <input name="address1" placeholder="Address Line 1">
        </label>
        <div>&nbsp;</div>
        <input name="address2" placeholder="Address Line 2">
        <div>&nbsp;</div>
        <input name="city" class="city" placeholder="Town/City">
        <input name="state" class="state" placeholder="State">
        <input name="zip" class="zip" placeholder="Zip Code">
        <div>&nbsp</div>
        <select name="country">
        <option value="0">Country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        </select>
    </li>
    <li>
        <label>
        <div>Home Phone No.</div>
        <input type="tel" name="homephone">
        </label>
    </li>
    <li>
        <label>
        <div>Cell Phone No.</div>
        <input type="tel" name="cellphone">
        </label>
    </li>
    <li>
        <label>
        <div>Skype Name</div>
        <input name="skype">
        </label>
    </li>
    <li>
        <label>
        <div>Twitter</div>
        <span class="twitter_prefix">@</span>
        <input name="twitter" class="twitter">
        </label>
    </li>
     </ul>
</fieldset>
<fieldset>
    <legend>Login Details</legend>
    <ul>
    <li>
        <label class="required">
        <div>Password</div>
        <input type="password" name="password" required>
        </label>
    </li>
    <li>
        <label class="required">
        <div>Confirm Password</div>
        <input type="password" name="confirm_password" required>
        </label>
    </li>
    </ul>
</fieldset>
<fieldset>
    <legend>Order Details</legend>
    <table>
    <thead>
    <tr>
        <th>Product Code</th><th>Description</th><th>Qty</th><th>Price</th>
        <th>Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
        COMP001
        <input type="hidden" name="product_code" value="COMP001">
        </td>
        <td>The Ultimate Smartphone</td>
        <td>
        <input type="number" data-price="399.99" name="quantity" value="0"
        min="0" max="99" maxlength="2">
        </td>
        <td>399.99</td>
        <td>
        <output name="item_total" class="item_total">$0.00</output>
        </td>
    </tr>
    <tr>
        <td>
        COMP002
        <input type="hidden" name="product_code" value="COMP002">
        </td>
        <td>The Ultimate Tablet</td>
        <td>
        <input type="number" data-price="499.99" name="quantity" value="0"
        min="0" max="99" maxlength="2">
        </td>
        <td>499.99</td>
        <td>
        <output name="item_total" class="item_total">$0.00</output>
        </td>
    </tr>
    <tr>
        <td>
        COMP003
        <input type="hidden" name="product_code" value="COMP003">
        </td>
        <td>The Ultimate Netbook</td>
        <td>
        <input type="number" data-price="299.99" name="quantity" value="0"
        min="0" max="99" maxlength="2">
        </td>
        <td>299.99</td>
        <td>
        <output name="item_total" class="item_total">$0.00</output>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">Order Total</td>
        <td>
        <output name="order_total" id="order_total">$0.00</output>
        </td>
    </tr>
    </tfoot>
    </table>
</fieldset>
<fieldset>
    <legend>Payment Details</legend>
    <ul>
    <li>
        <label class="required">
        <div>Name on Card</div>
        <input name="card_name" required>
        </label>
    </li>
    <li>
        <label class="required">
        <div>Credit Card No.</div>
        <input name="card_number" pattern="[0-9]{13,16}"
        maxlength="16" required title="13-16 digits, no spaces">
        </label>
    </li>
    <li>
        <label class="required">
        <div>Expiry Date</div>
        <input type="month" name="card_expirty" maxlength="7"
        placeholder="yyyy-mm" required value="2015-06">
        </label>
    </li>
    <li>
        <label class="required">
        <div>CVV2 No.</div>
        <input name="card_cvv2" class="cvv" maxlength="3" pattern="[0-9]{3}"
        required title="exactly 3 digits">
        <span>(Three digit code at back of card)</span>
        </label>
    </li>
     </ul>
</fieldset>
        <div class="buttons">
            <input type="submit" value="Submit Order">
            <input type="submit" id="saveOrder" value="Save Order" formnovalidate formaction="/save">
        </div>
 </form>

...以及 app.js 文件:

(function() {
var init=function() {
var orderForm=document.forms.order,
    saveBtn=document.getElementById('saveOrder'),
    saveBtnClicked=false;

var saveForm=function() {
    if(!('formAction' in document.createElement('input'))) {
    var formAction=saveBtn.getAttribute('formAction');
    orderForm.setAttribute('action', formAction);
    }
    saveBtnClicked=true;
};

saveBtn.addEventListener('click', saveForm, false);

var qtyFields=orderForm.quantity,
    totalFields=document.getElementsByClassName('item_total'),
    orderTotalField=document.getElementById('order_total');

var formatMoney=function(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

var calculateTotals=function() {
    var i=0,
        ln=qtyFields.length,
        itemQty=0,
        itemPrice=0.00,
        itemTotal=0.00,
        itemTotalMoney='$0.00',
        orderTotal=0.00,
        orderTotalMoney='$0.00';

    for(; i<ln; i++) {
       if(!!qtyFields[i].valueAsNumber) {
          itemQty=qtyFields[i].valueAsNumber || 0;
       } else {
           itemQty=parseFloat(qtyFields[i].value) || 0;
       }

       if(!!qtyFields[i].dataset) {
           itemPrice=parseFloat(qtyFields[i].dataset.price);
       } else {
           itemPrice=parseFloat(qtyFields[i].getAttribute('data-price'));
       }

       itemTotal=itemQty*itemPrice;
       itemTotalMoney='$'+formatMoney(itemTotal.toFixed(2));
       orderTotal+=itemTotal;
       orderTotalMoney='$'+formatMoney(orderTotal.toFixed(2));

       if(!!totalFields[i].value) {
           totalFields[i].value=itemTotalMoney;
           orderTotalField.value=orderTotalMoney;
       } else {
           totalFields[i].innerHTML=itemTotalMoney;
           orderTotalField.innerHTML=orderTotalMoney;
       }
    }
};

CalculateTotals();

var qtyListeners=function() {
    var i=0,
        ln=qtyFields.length;

    for(; i<ln; i++) {
        qtyFields[i].addEventListener('input', calculateTotals, false);
        qtyFields[i].addEventListener('keyup', calculateTotals, false);
    }
};

qtyListeners();

var doCustomValidity=function(field, msg) {
    if('setCustomValidity' in field) {
        field.setCustomValidity(msg);
    } else {
        field.validationMessage=msg;
    }
};

var validateForm=function() {
    doCustomValidity(orderForm.name, '');
    doCustomValidity(orderForm.password, '');
    doCustomValidity(orderForm.confirm_password, '');
    doCustomValidity(orderForm.card_name, '');

    if(orderForm.name.value.length < 4) {
        doCustomValidity(
            orderForm.name, 'Full Name must be at least 4 characters long'
        );
    }

    if(orderForm.password.value.length < 8) {
        doCustomValidity(
            orderForm.password,
            'Password must be at least 8 characters long'
        );
    }

    if(orderForm.password.value !=orderForm.confirm_password.value) {
        doCustomValidity(
            orderForm.confirm_password,
            'Confirm Password must match Password'
        );
    }

    if(orderForm.card_name.value.length < 4) {
        doCustomValidity(
            orderForm.card_name,
            'Name on Card must be at least 4 characters long'
        );
    }
};

orderForm.addEventListener('input', validateForm, false);
orderForm.addEventListener('keyup', validateForm, false);

window.addEventListener('load', init, false);
};
})();

当我使用 chrome 调试器时不再出现任何错误**

一如既往，提前致谢!!

最佳答案

我看到一条错误消息(脚本标签正在工作):Uncaught SyntaxError: Unexpected number on line 27 of app.js

在这一部分:

var calculateTotals=function() {
    var 1=0,
        ln=qtyFields.length,
        itemQty=0,
        itemPrice=0.00,
        itemTotal=0.00,
        itemTotalMoney='$0.00',
        orderTotal=0.00,
        orderTotalMoney='$0.00';

这指的是在“var 1=0”中使用数字“1”作为变量名称，

解决该问题后，下一个问题是第 18 行出现“orderForm 未定义”错误。对我来说，这似乎是一个范围问题，其中变量是在方法中定义的，而其他方法正在尝试访问它，但它已退出范围。

总的来说，据我所知，您的问题看起来不像您想象的那样，看起来您需要调试您的 JavaScript。

大多数现代网络浏览器都内置了调试工具。这是使用 Chrome 的指南。 https://developer.chrome.com/devtools/docs/javascript-debugging

关于javascript - 将 .js 文件链接到 .html 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27932096/

25 4 0
文章推荐： iphone-sdk-3.0 - 更改 UITableViewCell textLabel 背景颜色以清除
文章推荐： php - 在 Windows 10 和 PHP 7.3 中安装 AMQP
文章推荐： irc - 编程 channel 的最佳 IRC 服务器？
文章推荐： windows - nodeJS 是否存在现有的事件 COM(组件对象模型)绑定(bind)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com