基于JS实现的翻译器点击按钮无法在文本框输出内容如何修复

问题原因 #

• 你把文本取值、替换的逻辑写在了DOMContentLoaded触发阶段，页面刚加载完就会执行这部分逻辑，此时你还没在输入框输入内容，后续输入内容后test变量也不会同步更新，点击按钮时永远用的是页面刚加载时的空值。
• HTML存在重复ID问题：demo同时被用在textarea标签和其内部的p标签上，会导致JS获取元素异常。
• 给textarea赋值用innerText不符合规范，应该用value属性。

修改方案 #

修正后的JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  var mapObj = {
    A: 'Eh'
  };
  var check = document.getElementById("check");
  check.addEventListener('click', function() {
    // 点击按钮时再取值、做替换
    var test = document.getElementById("myText").value;
    test = test.replace(/A/g, function(matched) {
      return mapObj[matched];
    })
    // 给textarea赋值用value
    document.getElementById('demo').value = test;
  }, false);
}, false);

修正后的HTML代码 #

<html>
<body>
  <textarea rows="10" cols="50" id="myText"></textarea>
  <button id="check">translate</button>
  <!-- 删掉textarea内部重复id的p标签 -->
  <textarea rows="10" cols="50" id='demo' readonly></textarea>
</body>
</html>

CSS代码无需调整，修改后点击translate按钮即可正常将输入框内的字符A替换为Eh输出到结果框。

内容的提问来源于stack exchange，提问作者삼산화비소