使用onchange属性遇ReferenceError：函数未定义，输入框值设置失效求助

看起来你碰到了两个典型的前端小问题：输入框值无法同步更新，还有onchange绑定的函数找不到导致的ReferenceError。咱们一步步拆解解决：

问题1：输入框值不更新（返回undefined） #

你在函数里只是给region变量赋了新值，但这个变量只是输入框当前值的副本，并没有把修改后的值写回输入框本身。所以输入框的显示完全没变化，如果你尝试打印region会有值，但输入框的value属性还是初始状态，自然会出现看似"undefined"的情况。

问题2：ReferenceError：函数未定义 #

这个问题大概率是JS代码执行时机不对——如果你的JS放在<head>里，DOM元素还没加载完成就执行了setAttribute("onchange","myFunction()")，此时浏览器根本找不到myFunction（因为函数定义可能在DOM元素之后）。另外，用setAttribute绑定事件不如直接用addEventListener可靠，后者能避免很多作用域相关的坑。

修正后的完整代码 #

HTML（优化添加value属性，简化取值逻辑）

<select id="dropdown">
  <option id="AU" value="Australia">Australia</option>
  <option id="CH" value="Switzerland">Switzerland</option>
</select>
<input type="text" id="regionInput">

JS（用事件监听+DOM加载完成触发，彻底避免作用域问题）

// 等待整个DOM加载完成再绑定事件，确保元素都已存在
document.addEventListener('DOMContentLoaded', function() {
  // 提前获取DOM元素，避免重复查询DOM，提升性能
  const dropdown = document.getElementById('dropdown');
  const regionInput = document.getElementById('regionInput');

  // 绑定change事件
  dropdown.addEventListener('change', function() {
    // 直接通过this.value获取选中项的值（因为给option加了value属性）
    const country = this.value;
    let region;
    
    if (country === "Australia") {
      region = 'test';
    } else {
      region = 'test 2';
    }

    // 关键步骤：把修改后的值设置回输入框
    regionInput.value = region;
  });
});

额外说明 #

• 如果不想给option加value属性，也可以继续用this.options[this.selectedIndex].text来获取选项文本，效果完全一致。
• 把JS代码直接放在<body>标签的末尾，也能达到类似DOMContentLoaded的效果（DOM元素先加载完成，再执行JS），但用DOMContentLoaded是更规范、兼容性更好的写法。

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