JavaScript条件判断不生效：无法识别函数内部定义的is_sum_1变量

问题原因 #

• 变量作用域限制：你在dropDownListener函数内部用var声明的is_sum_1是函数局部变量，仅在函数内部可访问，HTML里的script代码在全局作用域运行，自然读取不到这个变量，只有把变量声明在全局作用域（函数外部）才能被全局代码访问。
• 执行时机不匹配：你写在HTML
  内部的script标签会在页面解析到对应位置时立刻执行，此时用户还没有操作下拉框，就算变量是全局的，也不可能实现「用户选中下拉框后再追加文本」的需求。
• 额外语法问题：你提供的JS代码里dropDownListener函数没有写闭合的}，属于语法错误，需要先补上。

解决方法 #

推荐直接把追加逻辑写到下拉框的change事件回调中，不需要额外声明全局变量，代码更简洁也不会有作用域冲突：
修改后的JS代码：

function dropDownListener(input_id, output_id) {
   var dropDown = document.getElementById(input_id);

   dropDown.onchange = function() {
      document.getElementById(output_id).innerHTML = dropDown.value;
      // 下拉框触发change事件（用户选中内容）时直接执行追加操作
      $('#summary').append("I'm trying to append text if condition met")
   }
}
// 注意原代码漏了函数闭合的大括号，这里已经补上
dropDownListener('sum_1', 'print_sum_1');

HTML部分可以删除原来的内联判断script，精简为：

<div id="summary">
   <span id="print_sum_1"></span>
</div>

可选方案（保留变量判断逻辑） #

如果你确实需要保留is_sum_1变量的条件判断逻辑，可以使用全局变量+封装函数的实现方式：
JS代码：

// 全局作用域声明变量
var is_sum_1 = false;

function dropDownListener(input_id, output_id) {
   var dropDown = document.getElementById(input_id);

   dropDown.onchange = function() {
      document.getElementById(output_id).innerHTML = dropDown.value;
      // 用户选中后修改变量状态
      is_sum_1 = true;
      // 调用追加逻辑
      appendSummary();
   }
}
dropDownListener('sum_1', 'print_sum_1');

function appendSummary() {
   if (is_sum_1) {
      $('#summary').append("I'm trying to append text if condition met")
   }
}

HTML部分同样不需要保留原来的内联script，和上面的精简版一致即可。

内容的提问来源于stack exchange，提问作者Dominic van der Pas