如何将输出结果打印到输入文本？JS控制台正常但文本输出异常

你的代码没法把结果渲染到页面对应位置，核心是2个错误：

• 函数reverse没有定义入参接收传入的输入值：你在按钮点击事件里给reverse传了输入框的value，但函数声明时没写形参，函数内部直接使用的text是未定义的，自然没法生成内容塞到页面里
• 每次执行反转逻辑前没有清空输出容器的旧内容，多次点击提交会把多次反转的结果拼接在一起
  另外你原来的HTML里submit按钮的value属性和前面的事件属性之间没加空格，属性解析会出问题。

JS逻辑 #

function reverse(text) {
  const outputNode = document.getElementById('output');
  // 先清空历史输出
  outputNode.textContent = '';
  // 逐字符拼接反转内容
  for (let i = text.length - 1; i >= 0; --i) {
    outputNode.textContent += text[i];
    console.log(text[i]);
  }
}

优化提示：逐次修改DOM内容会触发多次页面重绘，性能较差，你可以先把反转后的字符串拼好，再一次性塞到输出节点里。字符串反转甚至不需要手写循环，直接用const reversedText = text.split('').reverse().join('')就能拿到结果，再一次性赋值给输出节点即可。

HTML结构 #

<div class="container" style="background-color: rgb(170, 166, 178); margin-top: 50px;padding-bottom: 10px;">
    <h4>input</h4>
    <span id="out"></span>
    <input type="text" id="input">
    <button onclick="document.getElementById('input').value = ''">clear</button>
    <br><br>
    <input type="button" onclick="reverse(document.getElementById('input').value)" value="submit">
    <p id="output"></p>
</div>

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