傳遞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