求助：输入框value属性无法实时同步内容至结果容器

你的代码仅在页面初始化时执行了一次输入框值的读取与赋值操作，此时输入框默认是空值，所以结果容器result没有内容；而且没有监听输入框的内容变化事件，后续输入的内容无法同步到结果容器中。

修改后的代码如下：

<body>
<div id="result" style="height:100px"></div>
<hr>
<input type="text" id="inp">
<script>
let inp = document.getElementById('inp');
let result = document.getElementById('result');

// 监听输入框的input事件，实时同步内容
inp.addEventListener('input', function() {
  result.textContent = inp.value;
});
</script>
</body>

关键修改说明 #

• 给输入框添加了input事件监听，只要输入框内容发生变化（打字、粘贴、删除等操作都会触发），就会执行回调函数
• 在回调函数中重新读取输入框的value并赋值给结果容器的textContent，实现内容的实时同步

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