JavaScript函数未返回任何布尔值或票证计算错误
[英]JavaScript function is not returning any boolean value or ticket calculation is wrong
问题描述
I'm trying to complete an online assignment for javascript and HTML. 
我正在尝试完成javascript和HTML的在线任务。 Question is: 问题是：
Book Ticket page – This will contain details that will be entered by the user to book train tickets
售票页面-此页面将包含用户输入的详细信息以预订火车票 Thank you page – Thank you page appears after user successfully booking a ticket
谢谢页面–用户成功预订机票后，出现“谢谢”页面
The no of tickets should be greater the no of children (Use java script for doing this validation). 票证的数量应大于子代的数量（使用Java脚本进行此验证）。 Provide an error message in the alert box as “No of tickets should be greater than the no of children”. 在警报框中提供错误消息，为“票证的数量应大于子票的数量”。
· Show date and time should be either current date or future date. ·显示日期和时间应该是当前日期或将来的日期。 (Use java script for doing this validation). （使用Java脚本进行此验证）。 Provide an error message in the alert box as “Show date and time should be either current date or future date”. 在警报框中提供一条错误消息，如“显示日期和时间应为当前日期或将来的日期”。
· All the fields are mandatory (Should be done using HTML5). ·所有字段都是必填字段（应使用HTML5完成）。
· Ticket Fare should be calculated based on the below logic. ·票价应根据以下逻辑计算。 (Use Java script for doing the calculation). （使用Java脚本进行计算）。
o Ticket Fare = Fare for 1 ticket * # of tickets o票价= 1张票价*门票数量
o Assume fare for 1 ticket is 200. o假设一张票的票价是200。
· For children the fare of 1 ticket is 100. ·对于儿童，一张票的票价为100。
· Once the user submit the form,ticket fare should be calculated and displayed in the alert box as “Your approximate ticket amount is INR“. ·用户提交表格后，应该计算出票价，并在警报框中显示为“您的大致票价为INR”。
The JavaScript method for calculating ticket price should return a Boolean value. 用于计算门票价格的JavaScript方法应返回一个布尔值。
Example: No of tickets: 4 No of children's:1 then the ticket fare will be 700. 示例：票数：4儿童票数：1，则票价为700。
The following error is occurring: 发生以下错误：
Have provided all the inputs correctly, but the ticket calculation is wrong or The JavaScript method is not returning any boolean value
Even though I returned values from methods and it's calculating the expected output ie No of tickets: 4 No of children's:1 then the ticket fare will be 700. 即使我从方法中返回了值，它也在计算预期的输出，即票数：4儿童票数：1，那么票费将是700。
function validations(){ var noTickets=document.getElementById("tickets").value; var noChildrens=parseInt(document.getElementById("childrens").value); var value=document.getElementById("showdate").value; if(noTickets < noChildrens) { alert("No of tickets should be greater than the no of children"); return false; } if(new Date() > new Date(value)) { alert("Show date and time should be either current date or future date"); return false; } else{ var adults=noTickets-noChildrens; var ticketfare=(adults*200) + (noChildrens*100); alert("Your approximate ticket amount is "+ticketfare+" INR"); return true; } }
.left{ display: inline-block; width:140px; text-align: left; } .right { margin-top: 5px; margin-bottom: 5px; display:inline; margin-left: 100px; } header{ width:100%; margin: 0 auto; } .item { position: relative; overflow: hidden; width: 200px; } .item img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .item:hover img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
<html> <body bgcolor="aqua"> <header><h1>Movie Ticket Booking</h1></header> <form action="thankyou.html" method="post" onsubmit="return validations()" autocomplete> <label for="name" class="left">Name</label> <input type="text" name="name" pattern="[a-zA-Z]+[ ][a-zA-Z]+" class="right" placeholder="Enter the Name" required /><br> <label for="moviename" class="left">Movie Name</label> <input list="movies" name="moviename" autocomplete="on" class="right" required="required"> <datalist id="movies"> <option value="Irada"></option> <option value="Rangoon"></option> <option value="Logan"></option> <option value="Fist Fight"></option> </datalist><br> <label for="circle" class="left">Circle</label> <input list="circles" name="circle" autocomplete="on" class="right" required="required"> <datalist id="circles"> <option value="Silver"></option> <option value="Gold"></option> <option value="Platinum"></option> </datalist><br> <label for="phone" class="left">Phone no</label> <input type="text" name="phone" placeholder="Enter Mobile # here" maxlength="10" pattern="[0-9]{10}" class="right" required ><br> <label for="showdate" class="left">Show date and time</label> <input type="datetime-local" name="showdate" class="right" required="required" id="showdate"><br> <label for="tickets" class="left">No of tickets</label> <input type="number" name="tickets" min="1" max="10" class="right" required="required" id="tickets"><br> <label for="childrens" class="left">No of children's</label> <input type="number" name="childrens" min="1" max="5" class="right" required="required" id="childrens"><br> <input type="submit" name="Book My Show" value="Book My Show" class="left" style="text-align: center"> <input type="reset" name="reset" value="Reset" class="right"> </form> <footer> <div class="item"> <img src="contactus.jpg" id="contactus" alt="image not found"> </div> </footer> </body> </html>
I don't know how can I solve this error. 我不知道该如何解决这个错误。 Any help/suggestion will be really appreciated. 任何帮助/建议将不胜感激。
2 个解决方案
解决方案1
0
This is how I would go about it. 这就是我要做的。 I have reduced the example to just the necessary bits in order to save space here. 为了节省空间，我将示例简化为仅必要的位。
Now the problem is that you—unless you prevent the default action of the event—the form will submit before your event listener is executed. 现在的问题是，除非您阻止事件的默认操作，否则表单将在执行事件侦听器之前提交。 So, you need to prevent the default action, validate the form, then submit the result if it passes validation. 因此，您需要阻止默认操作，验证表单， 然后在结果通过验证后提交结果。
This example goes most of the way, now you just need to send the validated response to the server. 此示例已完成大部分流程，现在您只需要将经过验证的响应发送到服务器即可。 Keep in mind that client-side validation should not replace server-side validation. 请记住，客户端验证不应替代服务器端验证。 Nothing that faces the client should ever be trusted as it can easily be modified from the console. 面对客户端的任何事物都不应该被信任，因为可以轻松地从控制台对其进行修改。
There are many ways to serialize a form, then get sending the request to the server is fairly trivial (again, there are a few ways to do this). 有很多方法可以序列化表单，然后将请求发送到服务器相当简单（再次，有几种方法可以做到这一点）。
const form = document.getElementById('booking-form'); form.addEventListener('submit', event => { event.preventDefault(); const tickets = +form.tickets.value; const children = +form.children.value; const date = form.date.value; const adults = tickets - children; const fare = (adults*200) + (children*100); try { if(adults < 0) { throw "Number of children should not exceed number of tickets." } if(Date.now() > Date.parse(date)) { throw "Cannot book showings in the past."; } } catch(error) { alert(error); return false; } alert(`Your approximate ticket amount is ${fare} INR`); return true; });
<form id="booking-form" action="thankyou.html" method="post" autocomplete> <label>Show date and time <input type="datetime-local" name="date" required id="showdate"> </label><br> <label>Number of tickets: <input type="number" name="tickets" min="1" max="10" required id="tickets"> </label><br> <label>Number of children: <input type="number" name="children" min="1" max="5" required id="childrens"> </label><br> <input type="submit" value="Book My Show"> <input type="reset" value="Reset"> </form>
解决方案2
-1 2017-08-21 19:01:21
You get a string back from getElementById().value so you need to convert that to a number. 您会从getElementById().value返回一个字符串，因此需要将其转换为数字。 For example, var not = parseInt(document.getElementById("tickets").value) . 例如， var not = parseInt(document.getElementById("tickets").value) 。
Also, try to use more descriptive variable name. 另外，请尝试使用更具描述性的变量名称。 not could be numTickets and noc could be numChildrensTickets not可能是numTickets和noc可能是numChildrensTickets
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.