如何将HTML搜索框值显示到‘搜索结果为’区域？代码失效排查

先看看你提供的代码：

<!DOCTYPE html> <html> <head> </head> <body> <input type="text" id="autocomplete" value="" placeholder="Search for names.." title="Type in a name"> <p> Search results for "<span id="result"></span>" </p> <button onclick="myname();"> Button </button> <script> function myname () { document.getElementById("autocomplete").value = document.getElementById("result").innerHTML; } </script> </body> </html>

问题核心 #

你把赋值的方向搞反了！ 当前代码是把result元素的内容（初始为空）赋值给搜索框autocomplete的value属性，这和你想要的“把搜索框里的内容显示到结果区域”完全相反。

修正方案 #

只需要调换赋值语句的两端，将搜索框的value取出，赋值给result的innerHTML即可：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type="text" id="autocomplete" value="" placeholder="Search for names.." title="Type in a name">
  <p> Search results for "<span id="result"></span>" </p>
  <button onclick="myname();"> Button </button>
  <script>
    function myname () {
      // 正确逻辑：搜索框的值 → 结果区域
      document.getElementById("result").innerHTML = document.getElementById("autocomplete").value;
    }
  </script>
</body>
</html>

现在点击按钮后，你在搜索框输入的内容就会正确显示到Search results for "..."的引号中间啦～

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