时间戳

首页 > 解决方案 > 每当我运行它时，我都会收到 NaN 错误？

javascript - 每当我运行它时，我都会收到 NaN 错误？

问题描述

我听说 NaN 错误是当您尝试将对象作为数字传递时，但在我的 HTML 中，“productquantity”设置为数字，那么为什么会出现此错误？这些文件与另一个 HTML 文件和另一个 JavaScript 文件一起操作以检索数据，这两个文件显示数据。'productquantity 是我唯一的障碍，也是出现 NaN 错误的地方。如果您需要其他 HTML 和 Javascript 文件，请告诉我。提前致谢！

"use strict";

function getBooking() {
    var laptopsprice = 0;
    if (sessionStorage.fname != undefined) {    //if sessionStorage for username is not empty
        //confirmation text
        //outputs user details in payment page and stores values to be sent to server in hidden input tags
        document.getElementById("confirm_name").textContent = sessionStorage.fname + " " + sessionStorage.lname;
        document.getElementById("confirm_email").textContent = sessionStorage.email;
        document.getElementById("confirm_phone").textContent = sessionStorage.phone;
        document.getElementById("confirm_streetname").textContent = sessionStorage.streetname;
        document.getElementById("confirm_suburb").textContent = sessionStorage.suburb;
        document.getElementById("confirm_state").textContent = sessionStorage.state;
        document.getElementById("confirm_postcode").textContent = sessionStorage.postcode;
        document.getElementById("confirm_laptops").textContent = sessionStorage.laptops;
        document.getElementById("confirm_productquantity").textContent = Number(sessionStorage.productquantity);
        document.getElementById("confirm_cost").textContent = laptopsprice;
        laptopsprice = totalproductcost(sessionStorage.laptops, Number(sessionStorage.productquantity));
        
        
        //values for hidden input tags that send data to the server
        document.getElementById("a_name").value = sessionStorage.fname + " " + sessionStorage.lname;
        document.getElementById("a_email").value = sessionStorage.email;
        document.getElementById("a_phone").value = sessionStorage.phone;
        document.getElementById("a_streetname").value = sessionStorage.streetname;
        document.getElementById("a_suburb").value = sessionStorage.suburb;
        document.getElementById("a_state").value = sessionStorage.state;
        document.getElementById("a_postcode").value = sessionStorage.postcode;
        document.getElementById("a_laptops").textContent = sessionStorage.laptops;
        document.getElementById("a_productquantity").textContent = Number(sessionStorage.productquantity);
        document.getElementById("a_cost").value = laptopsprice;
    }
 }


function totalproductcost(laptops , productquantity) {
    var laptopsprice;
    if (laptops == "Workstation_Laptop") {
        laptopsprice = (productquantity * 2499);
    } else if (laptops == "Gaming_Laptop") {
        laptopsprice = (productquantity * 1789);
    } else if (laptops == "Laptop_Stand") {
        laptopsprice = (productquantity * 64);
    } else if (laptops == "Office_Laptop") {
        laptopsprice = (productquantity * 1499);
    }  
    return laptopsprice;
}



 function cancelBooking(){
    window.location = "enquiries.html";
    sessionStorage.clear();
}
//function for invoking getbooking and validate, cancel booking
function init() {
    document.getElementById("paymentform").onsubmit = validate;
    document.getElementById("cancelpurchase").addEventListener("click", cancelBooking);
    getBooking();//invokes getbooking function
}
//invokes init fuction on window load
window.onload = init;
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="scripts/payment.js"></script>
    <title>SwinTech</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"> </head>


    <header class="enquiriespage">
        <div class="main">
            <div class="logo"> <img src="logo.png" alt="logo"> </div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a href="enquiries.html">Enquiries</a></li>
                <li class="active">><a href="payment.html">Payment</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </header>

<section class="paymentthing">
    <div class="paymentcontainer">
        <fieldset>
            <legend>Order Summary:</legend>
            <p>Your Name: <span id="confirm_name"></span></p>
            <p>Your Email: <span id="confirm_email"></span></p>
            <p>Your Phone Number: <span id="confirm_phone"></span></p>
            <p>Street name: <span id="confirm_streetname"></span></p>
            <p>Suburb: <span id="confirm_suburb"></span></p>
            <p>State: <span id="confirm_state"></span></p>
            <p>Postcode: <span id="confirm_postcode"></span></p>
            <p>Product: <span id="confirm_laptops"></span></p>
            <p>Product Quantity: <span id="confirm_productquantity"></span></p>
            <p>Total Cost: $<span id="confirm_cost"></span></p>
            <input type="hidden" name="name" id="a_name" />
            <input type="hidden" name="email" id="a_email" />
            <input type="hidden" name="phone" id="a_phone" />
            <input type="hidden" name="streetname" id="a_streetname" />
            <input type="hidden" name="suburb" id="a_suburb" />
            <input type="hidden" name="state" id="a_state" />
            <input type="hidden" name="cost" id="a_cost" /> 
            <input type="hidden" name="laptops" id="a_laptops" />
            <input type="hidden" name="postcode" id="a_postcode" /> 
            <input type="hidden" name="productquantity" id="a_productquantity" />

        </fieldset>
        <br>
        <br>
        <form id="paymentform" method="post" action="https://mercury.swin.edu.au/it000000/formtest.php">
            <label for="cardType">Please Choose a Card Type:</label>
            <br>
            <br>
            <select name="cardType" id="cardType" required="required">
                <option value="">Please Select</option>
                <option value="Visa">Visa</option>
                <option value="Mastercard">Mastercard</option>
                <option value="American Express">AmEx</option>
            </select>
            <br>
            <br>
            <label for="cardName" id="cardName">Please Enter Name On Card:</label>
            <input type="text" name="cardName" maxlength="40" required="required">
            <br>
            <br>
            <label>Please Enter Credit Card Expiration Date:</label> <span class="expiration">
    <input type="tel" name="month" placeholder="MM" maxlength="2" size="2" required="required" />
    <span>/</span>
            <input type="tel" name="year" placeholder="YY" maxlength="2" size="2" required="required" /> </span>
            <br>
            <br>
            <br>
            <label for="cardNo">Credit Card Number:</label>
            <input id="cardNo" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required="required">
            <br>
            <br>
            <input type="submit" value="Check Out">
            <br>
            <br>
            <button type="button" id="cancelpurchase">Cancel Purchase</button>
        </form>
    </div>
</section>
<div class="footer">
    <div class="footer-content"></div>
    <div class="footer-bottom"></div> &copy; swintech.com | Designed by Bilal El-leissy </div>

</html>

标签： javascripthtml

解决方案

每当您检索或设置一个值以进入 html 标记或表单元素时，它就是一个字符串。即使您将该项目转换为Number()，DOM 也会将其存储为字符串。每当要在计算中使用该字符串时，将其转换为数字，然后使用加号运算符 parseInt 或 parseFloat，如下所示：

function totalproductcost(laptops , productquantity) {
    productquantity = +productquantity;
    // OR productquantity = parseInt(productquantity);
    // OR productquantity = parseFloat(productquantity); if you have a decimal to consider

    var laptopsprice;
    if (laptops == "Workstation_Laptop") {
        laptopsprice = (productquantity * 2499);
    } else if (laptops == "Gaming_Laptop") {
        laptopsprice = (productquantity * 1789);
    } else if (laptops == "Laptop_Stand") {
        laptopsprice = (productquantity * 64);
    } else if (laptops == "Office_Laptop") {
        laptopsprice = (productquantity * 1499);
    }  
    return laptopsprice;
}

推荐阅读