堆栈内存溢出
  繁体   English   中英

如何获取要在我的HTML中打印的Javascript方法

[英]How to get Javascript method to print in my HTML

 原文  2017-02-16 04:38:27  9   2    javascript/ html/ css

问题描述

我真的很沮丧，试图让我的html和javascript代码一起工作。 我正在尝试从storeClientData（）获取用户信息，以将其打印在ReservationMessage的顶部。 在过去的4个小时里，我一直没有运气。 任何帮助将非常感激。

我想得到一个显示如下的输出：姓氏先生，姓氏，街道，城市，省/州，国家/地区，联系信息。

然后：

汽车尺寸和价格，选项（例如导航），以天为单位的持续时间，租赁费用。 

<!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";
}

2 个解决方案

解决方案1
 0  2017-02-16 06:14:06

  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.-]+\\.[az]{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>

解决方案2
 0  2017-02-16 06:25:23

您没有在HTML中添加id="customerResult"属性，也没有从HTML中调用storeClientData()函数。 这就是为什么您无法从storeClientData（）函数获取用户信息，并且无法在预订表格的顶部打印该信息的原因。

我在预订表单顶部的HTML和<div id="customerResult"></div>元素顶部添加了<input type=button value="storeClientData" onClick="storeClientData(); return false;">元素之前的注册按钮元素。

您可以在jsfiddle链接http://jsfiddle.net/ADukg/10171/中引用最终代码。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将我的Javascript变量打印为HTML属性的一部分？ 无法获取JavaScript方法来验证我的HTML表单 如何使用 JavaScript 和 HTML 从日历中获取输入并打印日期 如何获取html打印javascript函数的返回值？ 如何在 HTML 中打印 javascript 值？ 如何使用javascript中的首选项打印html？ 如何在javascript中将字符串打印到html？ 使用Javascript获取当前的浏览器并在HTML上打印 如何打印一个jQuery获取HTML？ 如何从 html 和 javascript 中的 HTML 表（用户输入）打印或获取单元格值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM