当输入为空字符串更改为 false 时，表单不会从第一个输入框中删除警报

Question

我正在为学校做作业，以展示我们对 javascript 的了解。 它正在做我想做的一切，除了当我将第一个输入从空字符串调整为一个值时，它仍然需要显示名字。 我还想知道是否有人知道如何在单击我单击的其他按钮时显示所需的输入，因为除非所有输入都填写在表单中，否则我不希望其他功能运行。 谢谢！

 //Function to validate form inputs function validate() { var fname = document.getElementById("t1").value; var lname = document.getElementById("t2").value; var phoneNumber = document.getElementById("t3").value; var prodOne = document.getElementById("t4").value; var prodTwo = document.getElementById("t5").value; var prodThree = document.getElementById("t6").value; var isValid = true; if (fname == "") { document.getElementById("t1result").innerHTML = " First Name is required"; isValid = false; } else { document.getElementById("t2result").innerHTML = ""; } if (lname == "") { document.getElementById("t2result").innerHTML = " Last Name is required"; isValid = false; } else { document.getElementById("t3result").innerHTML = ""; } if (phoneNumber == "") { document.getElementById("t3result").innerHTML = " Phone number is required"; isValid = false; } else { document.getElementById("t3result").innerHTML = ""; } if (prodOne == "") { document.getElementById("t4result").innerHTML = " Product 1 is required"; isValid = false; } else { document.getElementById("t4result").innerHTML = ""; } if (prodTwo == "") { document.getElementById("t5result").innerHTML = " Product 2 is required"; isValid = false; } else { document.getElementById("t5result").innerHTML = ""; } if (prodThree == "") { document.getElementById("t6result").innerHTML = " Product 3 is required"; isValid = false; } else { document.getElementById("t6result").innerHTML = ""; } } //Function to calculate cost of all 3 products prior to tax function calculate() { var prodOne = document.getElementById("t4").value; var prodTwo = document.getElementById("t5").value; var prodThree = document.getElementById("t6").value; var totalCost = parseInt(prodOne) + parseInt(prodTwo) + parseInt(prodThree) document.getElementById('totalAmount').innerHTML = "The total cost of the three products before tax is: $" + totalCost; } //Function to calculate cost of all 3 products with tax function taxIncluded() { var prodOne = document.getElementById("t4").value; var prodTwo = document.getElementById("t5").value; var prodThree = document.getElementById("t6").value; var totalCost = parseInt(prodOne) + parseInt(prodTwo) + parseInt(prodThree) var totalCostTaxed = parseFloat(totalCost) * 0.13 + parseFloat(totalCost) document.getElementById('totalAmountTax').innerHTML = "The total cost of the three products with tax is: $" + totalCostTaxed; }

 <form id="f1" method="get" action="secondpage.html"> First Name: <input type="text" id="t1"><span class="result" id="t1result"></span> <br><br> Last Name: <input type="text" id="t2"><span class="result" id="t2result"></span> <br><br>Phone Number: <input type="text" id="t3"><span class="result" id="t3result"></span> <br><br>Product 1 amount: <input type="text" id="t4"><span class="result" id="t4result"></span> <br><br>Product 2 amount: <input type="text" id="t5"><span class="result" id="t5result"></span> <br><br>Product 3 amount: <input type="text" id="t6"><span class="result" id="t6result"></span> <br><br><input type="button" id="btn1" value="Validate" onclick="validate()"> <br><br><input type="button" id="btn1" value="Calculate" onclick="calculate()"> <br><br><input type="button" id="btn1" value="Calculate with Tax" onclick="taxIncluded()"> <div> <p id="totalAmount">Total Amount</p> </div> <div> <p id="totalAmountTax">Tax</p> </div> </form>

Answer 1

 //Function to validate form inputs function validate() { var fname = document.getElementById("t1").value; var lname = document.getElementById("t2").value; var phoneNumber = document.getElementById("t3").value; var prodOne = document.getElementById("t4").value; var prodTwo = document.getElementById("t5").value; var prodThree = document.getElementById("t6").value; var isValid = true; if (fname == "") { document.getElementById("t1result").innerHTML = " First Name is required"; isValid = false; } else { document.getElementById("t1result").innerHTML = ""; } if (lname == "") { document.getElementById("t2result").innerHTML = " Last Name is required"; isValid = false; } else { document.getElementById("t3result").innerHTML = ""; } if (phoneNumber == "") { document.getElementById("t3result").innerHTML = " Phone number is required"; isValid = false; } else { document.getElementById("t3result").innerHTML = ""; } if (prodOne == "") { document.getElementById("t4result").innerHTML = " Product 1 is required"; isValid = false; } else { document.getElementById("t4result").innerHTML = ""; } if (prodTwo == "") { document.getElementById("t5result").innerHTML = " Product 2 is required"; isValid = false; } else { document.getElementById("t5result").innerHTML = ""; } if (prodThree == "") { document.getElementById("t6result").innerHTML = " Product 3 is required"; isValid = false; } else { document.getElementById("t6result").innerHTML = ""; } } //Function to calculate cost of all 3 products prior to tax function calculate() { var prodOne = document.getElementById("t4").value; var prodTwo = document.getElementById("t5").value; var prodThree = document.getElementById("t6").value; var totalCost = parseInt(prodOne) + parseInt(prodTwo) + parseInt(prodThree) document.getElementById('totalAmount').innerHTML = "The total cost of the three products before tax is: $" + totalCost; } //Function to calculate cost of all 3 products with tax function taxIncluded() { var prodOne = document.getElementById("t4").value; var prodTwo = document.getElementById("t5").value; var prodThree = document.getElementById("t6").value; var totalCost = parseInt(prodOne) + parseInt(prodTwo) + parseInt(prodThree) var totalCostTaxed = parseFloat(totalCost) * 0.13 + parseFloat(totalCost) document.getElementById('totalAmountTax').innerHTML = "The total cost of the three products with tax is: $" + totalCostTaxed; }

 <form id="f1" method="get" action="secondpage.html"> First Name: <input type="text" id="t1"><span class="result" id="t1result"></span> <br><br> Last Name: <input type="text" id="t2"><span class="result" id="t2result"></span> <br><br>Phone Number: <input type="text" id="t3"><span class="result" id="t3result"></span> <br><br>Product 1 amount: <input type="text" id="t4"><span class="result" id="t4result"></span> <br><br>Product 2 amount: <input type="text" id="t5"><span class="result" id="t5result"></span> <br><br>Product 3 amount: <input type="text" id="t6"><span class="result" id="t6result"></span> <br><br><input type="button" id="btn1" value="Validate" onclick="validate()"> <br><br><input type="button" id="btn1" value="Calculate" onclick="calculate()"> <br><br><input type="button" id="btn1" value="Calculate with Tax" onclick="taxIncluded()"> <div> <p id="totalAmount">Total Amount</p> </div> <div> <p id="totalAmountTax">Tax</p> </div> </form>

您在第一个条件下验证 function 中的元素有误，在其他条件下您得到的是 t2result 而不是 t1，希望现在可以正常工作。