为何直接赋值变量无法实现输入框内容同步？

核心问题出在你对JavaScript值类型和引用类型的理解偏差上：

• 你初始化时写的js0 = 输入框.value，这里js0存的是输入框当时的value字符串——这是值类型的副本，不是对输入框value属性的实时关联。之后输入框内容变化时，js0不会自动更新，因为它只是个独立的字符串变量，nes0同理。
• 当你写nes0 = js0，只是把js0当前的字符串值赋值给nes0，这俩变量还是各自独立的，和输入框的value属性没有任何绑定关系。所以输入框内容变化时，这俩变量不会同步，自然没法让两个输入框内容同步。

正确的实现方式 #

要实现输入框内容同步，你需要直接操作输入框元素本身的.value属性，而不是把value赋值给变量再操作变量：

1. 实时同步（监听输入事件）

// 先获取输入框元素（存的是元素引用，不是value值）
const jsInput = document.getElementById('js0');
const nesInput = document.getElementById('nes0');

// 监听js输入框的输入事件，实时同步到nes输入框
jsInput.addEventListener('input', function() {
  nesInput.value = jsInput.value;
});

2. 单次同步（比如初始化时）

如果只是需要某一时刻把js0的内容同步到nes0，直接操作元素的value即可：

nesInput.value = jsInput.value;

为什么存元素变量可行？ #

因为DOM元素是引用类型，变量存的是指向元素的引用，不是副本。当你通过变量修改.value时，本质是在修改原输入框的属性，所以能直接反映到页面上。

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