传递JavaScript变量以填充innerHTML

Question

我正在尝试从表单输入中传递一个简单变量，以.innerHTML语法填充跨度。 我的代码（带有search.ejs）如下：

<script>function readSearchValue() {
      var passedSearchValue = document.getElementById('searchForm').submit();
      document.getElementById('mySearch').innerHTML = passedSearchValue;
    }
  </script>

  <!-- Search form -->
  <nav class="navbar navbar-light bg-light">
    <form class="form-inline" id="searchForm">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="searchValue">
      <button class="btn btn-outline-success my-2 my-sm-0 glyphicon glyphicon-search" type="submit" onclick="readSearchValue()"></button>
    </form>
  </nav>

<p>You have searched for:
    <span id="mySearch"></span>
  </p>

我也有一个search.js文件，该文件没有太多的ATM：

res.render('search', {
        title: 'Search results',

我收到上述代码的未定义错误。 在此先感谢您的帮助！

凯利。

Answer 1

如果要从服务器发送值，则可以直接使用ejs表达式。 如果您想在本地工作，则可以看到以下代码。

 function readSearchValue() { document.getElementById('mySearch').innerHTML = document.getElementById('searchValue').value; document.getElementById('searchForm').submit(); } 

 <!-- Search form --> <nav class="navbar navbar-light bg-light"> <form class="form-inline" id="searchForm" method="POST"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="searchValue"> <button class="btn btn-outline-success my-2 my-sm-0 glyphicon glyphicon-search" type="button" onclick="readSearchValue();">Submit</button> </form> </nav> <p>You have searched for: <span id="mySearch"></span> </p> 

目前，您看不到永久值，因为表单正在提交，因此页面正在重新加载。

Answer 2

您的代码即将完成。 您唯一需要更改的是“ readSearchValue”函数的第二行。 将“ mySearch”框的innerHTML设置为“ searchValue”输入字段的值。 代码document.getElementById("mySearch").innerHTML = document.getElementById("searchValue").value