JS与PHP环境下如何从函数外部访问变量？

嘿，我仔细扒了下你的代码，问题主要出在变量作用域和执行顺序这两个点上，咱们一步步捋明白：

1. 变量作用域的坑 #

你在全局声明了x、y、sum这些变量，但在函数内部又用var重新声明了一遍——比如getSides里的var x = parseFloat(...)，这会在函数内部创建一个局部变量x，和全局的x完全是两个东西！导致全局的x始终是undefined，sum也是同样的问题。

同理，selectModel里的var z = ...也一样，如果你想在函数外部访问z，这个var会把它变成局部变量，全局的z根本没被赋值。

2. 执行顺序的隐患 #

如果用户先选下拉框，还没输入side1和side2的时候，sum还是全局的初始值undefined，这时候执行z * sum就会得到NaN，页面上就会显示这个奇怪的结果。

修改后的代码 #

我把这些问题都修正了，还加了点小优化，你可以试试：

<select class='select-style' onchange="selectModel(this)"> 
  <option></option> 
  <?php 
    $select_cassetta_name = "select * from cassetta order by cassetta_name ASC"; 
    $run_cassetta = mysqli_query($con, $select_cassetta_name); 
    while($row=mysqli_fetch_array($run_cassetta)){ 
      $cassetta_id = $row['cassetta_id']; 
      $cassetta_name = $row['cassetta_name']; 
      $cassetta_price = $row['cassetta_price']; 
      echo "<option value='$cassetta_price'>$cassetta_name</option>"; 
    } 
  ?> 
</select> 
<div> 
  <p id="box"></p> 
</div> 
<div> 
  Sides SUM = <span id="sides_sum"></span> 
  <br> 
  Value x Sides = <span id="final_price"></span> 
</div> 
<script>
var x; 
var y; 
var z; 
var sum; 

function getSides() {
  // 去掉var，直接赋值给全局变量，加||0防止空值变成NaN
  x = parseFloat(document.getElementById("side1").value) || 0;
  y = parseFloat(document.getElementById("side2").value) || 0;
  sum = x + y;
  document.getElementById("sides_sum").innerHTML = sum;
  // 每次计算sum后，同步更新最终价格（如果已经选了模型的话）
  if (z !== undefined) {
    document.getElementById("final_price").innerHTML = z * sum;
  }
}

function selectModel(selectObject) {
  // 去掉var，赋值给全局z，加||0避免空值问题
  z = parseFloat(selectObject.value) || 0;
  document.getElementById("box").innerHTML = "You selected value: " + z;
  // 先判断sum是否存在，避免显示NaN
  if (sum !== undefined) {
    document.getElementById("final_price").innerHTML = z * sum;
  } else {
    document.getElementById("final_price").innerHTML = "请先输入边长";
  }
}
</script>

额外优化的点 #

• 给parseFloat加了|| 0，防止用户没输入值的时候变成NaN
• 在getSides里加了判断，如果已经选了模型，就自动更新最终价格，不用用户重新选下拉框
• 在selectModel里加了提示，如果还没输入边长，就显示友好提示，而不是莫名其妙的NaN

内容的提问来源于stack exchange，提问作者thedude12