javascript - 基本 Javascript - 变量范围混淆

Question

我有一个包含两个 html 表单的网页，每个表单都有一个提交按钮。我想确保用户在转到第二个表单之前单击第一个表单上的提交按钮。

我脑子里有这个 javascript:

<script type="text/javascript">
<!--Script to block date changes when price changes pending
var priceflag = 0;  
function pricechange() {
var priceflag = 1;  
}
function pricesubmit() {
var priceflag = 0;  
}
function datechange() {
    if (priceflag == 1){
alert ("Please click \"Submit\" before you move on to the dates.");
    }
}
-->
</script>

那么非常简写的形式是:

<form action="<?php $_SERVER['PHP_SELF']?>" method="post" name="seasonprice">
<input name="price" value="<?php echo $price ?>" type="text" size="7" maxlength="7" onChange="pricechange()">
<input name="price2" value="" type="text" size="7" maxlength="7">
<input name="submit" type="submit" value="Submit" onClick="pricesubmit()">
</form>
<br>
<br>
<form id="addseason" action="<?php $_SERVER['PHP_SELF']?>" method="post" name="addseason">
<input name="FromDate" type="date" value="2013-01-01" size="16" onMouseDown="datechange();">
</form>

如果用户更改了“price”，然后将光标放在“FromDate”上而没有单击“Submit”，他们应该会看到警告。但它不起作用!我很紧张，但我确信这是一个非常基本的错误。

Answer 1

当您使用var 时，您是在声明一个局部变量。因此，在您的代码中，您有 3 个不同的变量:全局 priceflag、pricechange 中的 priceflag 和 priceflag 在 pricesubmit 中。

此外，如评论中所建议的，在需要 bool 值的地方使用 bool 值(真/假)。

像这样的东西会起作用(注意函数中缺少的 var):

var priceflag = false;  
function pricechange() {
    priceflag = true;  
}
function pricesubmit() {
    priceflag = false;  
}
function datechange() {
     if (priceflag){
         ...
     }
}

有用的读物​​:

• Javascript Variable Scope on SO
• var on MDN