[英]JavaScript function is not returning any boolean value or ticket calculation is wrong
我正在尝试完成javascript和HTML的在线任务。 问题是：
售票页面-此页面将包含用户输入的详细信息以预订火车票
谢谢页面–用户成功预订机票后，出现“谢谢”页面
票证的数量应大于子代的数量（使用Java脚本进行此验证）。 在警报框中提供错误消息，为“票证的数量应大于子票的数量”。
·显示日期和时间应该是当前日期或将来的日期。 （使用Java脚本进行此验证）。 在警报框中提供一条错误消息，如“显示日期和时间应为当前日期或将来的日期”。
·所有字段都是必填字段（应使用HTML5完成）。
·票价应根据以下逻辑计算。 （使用Java脚本进行计算）。
o票价= 1张票价*门票数量
o假设一张票的票价是200。
·对于儿童，一张票的票价为100。
·用户提交表格后，应该计算出票价，并在警报框中显示为“您的大致票价为INR”。
用于计算门票价格的JavaScript方法应返回一个布尔值。
示例：票数：4儿童票数：1，则票价为700。
发生以下错误：
正确提供了所有输入，但是票证计算错误或JavaScript方法未返回任何布尔值
即使我从方法中返回了值，它也在计算预期的输出，即票数：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>
我不知道该如何解决这个错误。 任何帮助/建议将不胜感激。
这就是我要做的。 为了节省空间，我将示例简化为仅必要的位。
现在的问题是，除非您阻止事件的默认操作，否则表单将在执行事件侦听器之前提交。 因此，您需要阻止默认操作，验证表单， 然后在结果通过验证后提交结果。
此示例已完成大部分流程，现在您只需要将经过验证的响应发送到服务器即可。 请记住，客户端验证不应替代服务器端验证。 面对客户端的任何事物都不应该被信任，因为可以轻松地从控制台对其进行修改。
有很多方法可以序列化表单，然后将请求发送到服务器相当简单（再次，有几种方法可以做到这一点）。
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>
您会从getElementById().value返回一个字符串，因此需要将其转换为数字。 例如， var not = parseInt(document.getElementById("tickets").value) 。
另外，请尝试使用更具描述性的变量名称。 not可能是numTickets和noc可能是numChildrensTickets
javascript方法未返回布尔值或票证计算方法错误
[英]javascript method is not returning boolean or ticket calculation method is wrong
是否有任何 function 来修复 javascript 中数学计算的返回值？
[英]Is there any function to fix the returned value of a math calculation in javascript?
如何测试 function 在 javascript 中没有返回任何值
[英]How to test function in jest which is not returning any value in javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.