个人中心
gpt4 book ai didi

javascript - 如何让 Javascript 方法在我的 HTML 中打印

转载 作者：行者123 更新时间：2023-11-28 04:19:53 26 4
gpt4 key购买 nike

让我的 html 和 javascript 代码一起工作时，我真的很沮丧。我正在尝试从 storeClientData() 获取用户信息以打印在 reservationMessage 之上。在过去的 4 个小时里，我一直在努力，但没有成功。任何帮助将不胜感激。

我想获得如下所示的输出:Mr. Firstname, Lastname, street, city, province/state, country, contact info.

然后:

汽车尺寸和价格、选项(例如导航)、持续时间(以天为单位)、租赁费用。

<!DOCTYPE html>
<html>
<head>
    <title>Dodgy Brakes Car Rental</title>
    <meta charset="utf-8" />
    <link href="new.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="processregistration.js"></script>
</head>

    <center>
        <img src="logo.jpg" height="250" width="auto">
    </center>
<body>
<center>

<form name=costEstimation>
    <table>
        <tr>
            <td>
                <select required id="honorific">
                    <option value=None>None</option>
                    <option value=Mr.>Mr.</option>
                    <option value=Mrs.>Mrs.</option>
                    <option value=Ms.>Ms.</option>
                    <option value=Dr.>Dr.</option>
                </select>
            </td>
       </tr>
       <tr>
           <td>
               <input type="text" pattern ="[a-zA-Z0-9-\s]{2,20}$" placeholder="First Name" id="firstName">
               <input type="text" pattern ="[a-zA-Z0-9-\s]{2,20}$" placeholder="Last Name" id="lastName">
           </td>
       </tr>
       <tr>
           <td>
               <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="Street" id="street">
               <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="City" id="city">
           </td>
       </tr>
       <tr>
           <td>
               <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="State/Province" id="stateProvince">
               <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="Country" id="country">
           </td>
       </tr>
       <tr>
           <td>
               <input type="text" placeholder="Business Number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" id="businessNumber">
               <input type="text" placeholder="Home Number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" id="homeNumber">
           </td>
       </tr>
       <tr>
           <td>
               <input type = "email" pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,5}$" placeholder="E-mail" id="emailAddress">
           </td>
       </tr>
       <tr>
           <td>
           <center>
               <input type=button value="Register" onClick="showReservations(); return false;">
               <input type = "reset" value = "Reset">
           </center>
           </td>
       </tr>
    </table>

<div id="reservations" style="display:none;">

    <h3>Reservation Form</h3>

    <table>
        <tr>
            <td>
            <center>
                <h4><u>Type of Vehicle</u></h4>
                <input type=radio name=type value=25>Small $25.00<br>
                <input type=radio name=type value=35>Midsize $35.00<br>
                <input type=radio name=type value=45>Full-sized $45.00<br>
                <input type=radio name=type value=50 >Van $50.00<br>
            </center>
            </td>
        </tr>
        <tr>
            <td>
            <center>
                <h4><u>Additional Options</u></h4>
                <input type=checkbox name=navigationSystem value= "10" >Navigation System $10.00<br>
                <input type=checkbox name=childSeat value="5" >Child Seat $5.00<br>
                <input type=checkbox name=roofRack value="15" >Roof Rack $15.00<br>
                <input type=checkbox name=bicycleRack value="15" >Bicycle Rack $15.00<br>
            </center>
            </td>
        </tr>
        <tr>
            <td>
                <center>
                <br>
                <input type="text" placeholder="Enter Days" id="duration">
                <input type=button value="Calculate" onClick="calculateRental(); showFinal(); return false;">
                </center>
            </td>
        </tr>
    </table>
</div>

<div id="showFinal" style="display:none;">
    <h3><span id="reservationResult";  </span></h3>
</div>
</form> 
</center>
</body>
</html>

var customerData=[];

function storeClientData(){

    var honorific=document.getElementById("honorific").value
    customerData[0]=honorific;
    var firstName=document.getElementById("firstName").value;
    customerData[1]=firstName;
    var lastName=document.getElementById("lastName").value;
    customerData[2]=lastName;
    var street=document.getElementById("street").value;
    customerData[3]=street;
    var city=document.getElementById("city").value;
    customerData[4]=city;
    var stateProvince=document.getElementById("stateProvince").value
    customerData[5]=stateProvince;
    var country=document.getElementById("country").value;
    customerData[6]=country;
    var businessNumber=document.getElementById("businessNumber").value;
    customerData[7]=businessNumber;
    var homeNumber=document.getElementById("homeNumber").value;
    customerData[8]=homeNumber;
    var emailAddress=document.getElementById("emailAddress").value;
    customerData[9]=emailAddress;

var customerMessage = (customerData[0] + customerData[1] + " " + customerData[2]
    + "<br>" + customerData[3] 
    + "<br>" + customerData[4]
    + "<br>" + customerData[5] 
    + "<br>" + customerData[6]
    + "<br>" + customerData[7]
    + "<br>" + customerData[8]
    + "<br>" + customerData[9]);
    document.getElementById("customerResult").innerHTML = customerMessage;
    setFormToEdit();
}

function calculateRental(){
    var carSize = parseFloat(0);
    var extraAmount = parseFloat(0);
    var totalCost = parseFloat(0);
    var message = " ";
    var reservationMessage = " ";
    var duration = parseFloat(0)

    for (x = 0; x<document.costEstimation.type.length; x++){
        if(document.costEstimation.type[x].checked){
            carSize = document.costEstimation.type[x].value;
        }
    }
    carSize = parseFloat(carSize);
    if(document.costEstimation.navigationSystem.checked){
        extraAmount += parseFloat(document.costEstimation.navigationSystem.value);
        message = (message + " Navigation system");
    }if (document.costEstimation.childSeat.checked){
        extraAmount += parseFloat(document.costEstimation.childSeat.value);
        message = (message + " Child seat");
    }if (document.costEstimation.roofRack.checked){
        extraAmount += parseFloat(document.costEstimation.roofRack.value);
        message = (message + " Roof rack");
    }if (document.costEstimation.bicycleRack.checked){
        extraAmount += parseFloat(document.costEstimation.bicycleRack.value);
        message = (message + " Bicycle rack");
}

duration = (document.getElementById("duration").value);
duration = parseFloat(duration)
totalCost = (duration*carSize)+(duration*extraAmount);

reservationMessage += ("Car Information:" + "<br>" + "Rental cost: " + carSize + "<br>" + "Additional Options: " + message + "<br>" + "Total cost: " + totalCost);
document.getElementById("reservationResult").innerHTML = reservationMessage;
}

function setFormToEdit() {
    document.getElementById("honorific").readOnly=false;
    document.getElementById("firstName").readOnly=false;
    document.getElementById("lastName").readOnly=false;
    document.getElementById("street").disabled=false;
    document.getElementById("city").readOnly=false;
    document.getElementById("stateProvince").readOnly=false;
    document.getElementById("country").disabled=false;
    document.getElementById("homeNumber").readOnly=false;
    document.getElementById("businessNumber").readOnly=false;
    document.getElementById("emailAddress").disabled=false;
    }

    function showReservations() {
    document.getElementById("reservations").style.display = "block";
}

    function showFinal() {
    document.getElementById("showFinal").style.display = "block";
}

最佳答案 

    var customerData = [];

    function storeClientData() {

        var honorific = document.getElementById("honorific").value
        customerData[0] = honorific;
        var firstName = document.getElementById("firstName").value;
        customerData[1] = firstName;
        var lastName = document.getElementById("lastName").value;
        customerData[2] = lastName;
        var street = document.getElementById("street").value;
        customerData[3] = street;
        var city = document.getElementById("city").value;
        customerData[4] = city;
        var stateProvince = document.getElementById("stateProvince").value
        customerData[5] = stateProvince;
        var country = document.getElementById("country").value;
        customerData[6] = country;
        var businessNumber = document.getElementById("businessNumber").value;
        customerData[7] = businessNumber;
        var homeNumber = document.getElementById("homeNumber").value;
        customerData[8] = homeNumber;
        var emailAddress = document.getElementById("emailAddress").value;
        customerData[9] = emailAddress;
        var CarSize = document.querySelector('input[name="type"]:checked').value;
        customerData[10] = CarSize;
        var prices = document.getElementsByClassName('addtionClass');
        var str = "";
        for (var i = 0; i < prices.length; i++) {
        if (prices[i].checked)
            {
            str += prices[i].value + ",";
           }
        }
        customerData[11] = str;
        var duration = document.getElementById('duration').value;
        customerData[12] = duration;
        duration = parseFloat(duration)
       
        var customerMessage = (customerData[0] + customerData[1] + " " + customerData[2]
            + "<br>" + customerData[3]
            + "<br>" + customerData[4]
            + "<br>" + customerData[5]
            + "<br>" + customerData[6]
            + "<br>" + customerData[7]
            + "<br>" + customerData[8]
            + "<br>" + customerData[9]
            + "<br>" + customerData[10]
            + "<br>" + customerData[11]
            + "<br>" + customerData[12]
           
            );
        calculateRental();
        document.getElementById("customerResult").innerHTML = customerMessage;
     
        setFormToEdit();
    }

    function calculateRental() {
        var carSize = parseFloat(0);
        var extraAmount = parseFloat(0);
        var totalCost = parseFloat(0);
        var message = " ";
        var reservationMessage = " ";
        var duration = parseFloat(0)

        for (x = 0; x < document.costEstimation.type.length; x++) {
            if (document.costEstimation.type[x].checked) {
                carSize = document.costEstimation.type[x].value;
            }
        }
        carSize = parseFloat(carSize);
        if (document.costEstimation.navigationSystem.checked) {
            extraAmount += parseFloat(document.costEstimation.navigationSystem.value);
            message = (message + " Navigation system");
        } if (document.costEstimation.childSeat.checked) {
            extraAmount += parseFloat(document.costEstimation.childSeat.value);
            message = (message + " Child seat");
        } if (document.costEstimation.roofRack.checked) {
            extraAmount += parseFloat(document.costEstimation.roofRack.value);
            message = (message + " Roof rack");
        } if (document.costEstimation.bicycleRack.checked) {
            extraAmount += parseFloat(document.costEstimation.bicycleRack.value);
            message = (message + " Bicycle rack");
        }

        duration = (document.getElementById("duration").value);
        duration = parseFloat(duration)
        totalCost = (duration * carSize) + (duration * extraAmount);

        reservationMessage += ("Car Information:" + "<br>" + "Rental cost: " + carSize + "<br>" + "Additional Options: " + message + "<br>" + "Total cost: " + totalCost);
        document.getElementById("reservationResult").innerHTML = reservationMessage;
    }

    function setFormToEdit() {
        document.getElementById("honorific").readOnly = false;
        document.getElementById("firstName").readOnly = false;
        document.getElementById("lastName").readOnly = false;
        document.getElementById("street").disabled = false;
        document.getElementById("city").readOnly = false;
        document.getElementById("stateProvince").readOnly = false;
        document.getElementById("country").disabled = false;
        document.getElementById("homeNumber").readOnly = false;
        document.getElementById("businessNumber").readOnly = false;
        document.getElementById("emailAddress").disabled = false;
    }
    debugger;
    function showReservations() {
        document.getElementById('reservations').style.display = 'block';
    }

    function showFinal() {
        document.getElementById('showFinalResult').style.display = 'block';
    }
<html>
<head>
    <title>Dodgy Brakes Car Rental</title>
    <meta charset="utf-8" />
    <link href="new.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="processregistration.js"></script>
</head>

<center>
    <img src="logo.jpg" height="250" width="auto">
</center>
<body>
    <center>

        <form name=costEstimation>
            <input type="button" value="Print HTML" onclick="storeClientData(); return false;" />
            <div id="customerResult">
            </div>
            <table>
                <tr>
                    <td>
                        <select required id="honorific">
                            <option value=None>None</option>
                            <option value=Mr.>Mr.</option>
                            <option value=Mrs.>Mrs.</option>
                            <option value=Ms.>Ms.</option>
                            <option value=Dr.>Dr.</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" pattern="[a-zA-Z0-9-\s]{2,20}$" placeholder="First Name" id="firstName">
                        <input type="text" pattern="[a-zA-Z0-9-\s]{2,20}$" placeholder="Last Name" id="lastName">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="Street" id="street">
                        <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="City" id="city">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="State/Province" id="stateProvince">
                        <input type="text" pattern="[a-zA-Z0-9-\s]{2,25}" placeholder="Country" id="country">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" placeholder="Business Number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" id="businessNumber">
                        <input type="text" placeholder="Home Number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" id="homeNumber">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,5}$" placeholder="E-mail" id="emailAddress">
                    </td>
                </tr>

                <tr>
                    <td>
                        <center>
                            <input type=button value="Register" onclick="showReservations(); return false;">
                            <input type="reset" value="Reset">
                        </center>
                    </td>
                </tr>
            </table>

            <div id="reservations" style="display:none;">

                <h3>Reservation Form</h3>

                <table>
                    <tr>
                        <td>
                            <center>
                                <h4><u>Type of Vehicle</u></h4>
                                <input type=radio name="type" value=25>Small $25.00<br>
                                <input type=radio name="type" value=35>Midsize $35.00<br>
                                <input type=radio name= "type" value=45>Full-sized $45.00<br>
                                <input type=radio name="type" value=50>Van $50.00<br>
                            </center>
                    </tr></td>

                    <tr>
                        <td>
                            <center>
                                <h4><u>Additional Options</u></h4>
                                <input type=checkbox class="addtionClass" name=navigationSystem value="10">Navigation System $10.00<br>
                                <input type=checkbox class="addtionClass" name=childSeat value="5">Child Seat $5.00<br>
                                <input type=checkbox class="addtionClass" name=roofRack value="15">Roof Rack $15.00<br>
                                <input type=checkbox class="addtionClass" name=bicycleRack value="15">Bicycle Rack $15.00<br>
                            </center>
                    </tr></td>

                    <tr>
                        <td>
                            <center>
                                <br>
                                <input type="text" placeholder="Enter Days" id="duration">
                                <input type=button value="Calculate" onclick="calculateRental(); showFinal(); return false;">
                            </center>
                </table>
            </div>

            <div id="showFinalResult" style="display:none;">
                <h3><span id="reservationResult" >  </span></h3>
            </div>
           
        </form>
    </center>
</body>
</html>

关于javascript - 如何让 Javascript 方法在我的 HTML 中打印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42265086/

26 4 0
文章推荐： c++ - libc++协程的suspend_always::await_suspend应该是 "exported"到c++experimental.lib吗？
文章推荐： javascript - 找到页面最后一个div，调用它的点击函数
文章推荐： javascript - HTML/CSS/JS 图像未在线加载
文章推荐： javascript - React/Redux - 处理错误和错误代码
行者123
个人简介

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

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