Question

我正在构建一个包含验证和计算功能的订单。在文件夹中有两个文件; 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调试器**

时不再出现任何错误

一如既往，先谢谢!!

Answer 1

我看到一条错误消息（脚本标签正常工作）：未捕获的SyntaxError：app.js第27行的意外号码

在这部分：

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

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

1 个答案: