Question

我创建了一个表单，用户可以输入存储在变量中或根据用户输入计算的详细信息。单击该按钮时，将显示一条消息，显示带有成本变量的消息。表格清除但信息仍然存在。我遇到的问题是表单将更新成本值，但不会更新消息以显示错误消息。我确定有一些简单的东西我不知道了吗？

*了解我的意思，请通过以下方式测试小提琴：在每个尺寸框中添加尺寸20，在下一个框中添加区域2。点击按钮，费用将显示为40英镑。在每个新框中再次输入20，此时在区域中输入3。成本更新为60英镑。但是，尝试在区域框中输入6或7并显示错误消息，但它不显示？

我认为var cost是存储以前的值，因此默认开关不会触发？如何重置成本变量？（我在最后尝试过cost = null但它不起作用;保持相同的msg并读取£null）。

http://jsfiddle.net/6dxLou41/

很抱歉长代码。希望它有意义。

HTML

<form id="form">
<input type="text" name="data" id="length" maxlength="4"/>Length (cm)
<input type="text" name="data" id="width" maxlength="4"/>Width (cm)
<input type="text" name="data" id="height" maxlength="4"/>Height (cm)<br>           
<input type="text" name="data" id="zone" maxlength="4"/>Zone<br><br>
<button type="button" id="click_button">click</button>
</form>

<div id="message"></div>

CSS

#message {
visibility:hidden;
}

#message.show {
visibility:visible;  
}

JS

var cost;

var button=document.getElementById("click_button");
var msg=document.getElementById("message");

function load(){
button.addEventListener("click",getSize, false);
}

window.onload=load();

function getSize(){
var length=document.getElementById("length").value;
var width=document.getElementById("height").value;
var height=document.getElementById("height").value;
var zone=document.getElementById("zone").value;
    function checkSize(){
           if (length<50 && width<50 && height<50) {
               smallBox(zone);
               }
           else if (length>=50 && width>=50 && height>=50) {
               largeBox(zone);
               }
     }
checkSize();
}
           function smallBox(zone){
               switch(zone){
               case "1":
                   cost=20;
               break;
               case "2":
                   cost=40;
               break;
               case "3":
                   cost=60;
               break;
               default:
                   errorMsg();
               break;
               }
               if(!isNaN(cost)){
               showMsg();
               }
            }

           function largeBox(zone){
               switch(zone){
               case "1":
                   cost=40;
               break;
               case "2":
                   cost=60;
               break;
               case "3":
                   cost=80;
               break;
               default:
                   errorMsg();
               break;
               }
               showMsg();
            }

function errorMsg(){
msg.innerText="Error. Please check the details entered and try again"; 
msg.className="show";
resetForm();
}

function showMsg(){
msg.innerText="Thank you. The cost will be £" + cost;
msg.className="show";
resetForm();
}

function resetForm(){
document.getElementById("form").reset();
}

Answer 1

尝试更改

var cost;

到

var cost=0;

Answer 2

您

function resetForm(){
 document.getElementById("form").reset();
}

应该是

function resetForm(){
 document.getElementById("form").reset();
 msg.innerText="";
 msg.className="";
}

基本上：你没有将#message重新设置为隐藏，这是你开始的地方。而且，我也确保innerText是空白的。

Javascript：重置由表单创建的变量值

2 个答案: