Question

我正在尝试使用Flask创建一个简单的网页，我试图在javascript变量中捕获文本字段中写入的文本，然后在用户按下按钮时将其显示在控制台上。

这是代码

HTML

<script type="text/javascript" language="javascript" src="{{url_for('static',filename='js/main.js')}}"></script>

<div class="container">
    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <input type="text" id="txtWord" name="search" placeholder="Search..." >
      </div>
      <div class="col-md-3"></div>
    </div>

    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <input type="text" name="search" placeholder="# Result..." id="inputNumResults">
      </div>
      <div class="col-md-3"></div>
    </div>

    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4 text-center">
        <br>
        <button class="btn btn-success" type="button" id="buttonSearch" onclick="getText()">Search for words</button>
      </div>
      <div class="col-md-4"></div>
    </div>

的Javascript

function getText() {
    var txt = document.getElementById('txtWord').innerHTML;
    console.log(txt);
}

Answer 1

这是工作解决方案

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6">
    <input type="text" id="txtWord" name="search" placeholder="Search..." >
  </div>
  <div class="col-md-3"></div>
</div>

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6">
    <input type="text" name="search" placeholder="# Result..." id="inputNumResults">
  </div>
  <div class="col-md-3"></div>
</div>

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 text-center">
    <br>
    <button class="btn btn-success" type="button" id="buttonSearch" onclick="gt()">Search for words</button>
  </div>
  <div class="col-md-4"></div>
</div>

<script>
    function gt() {
        var txt = document.getElementById("txtWord").value;
        alert(txt);
    }
</script>

https://jsfiddle.net/ovtkmnmn/3/

我相信你的情况问题是关于加载这个js文件的顺序。

始终检查控制台显示的内容，我使用的时间＆＃34;在加载时＃34;加载类型它清楚地返回了一个错误，该函数未定义

Answer 2

使用.value作为输入，而不是.innerHTML

Answer 3

＆＃13;

(function () {
  document.getElementById('buttonSearch').addEventListener('click', getText, true);

  function getText() {
    var txt = document.getElementById('txtWord').value;
    console.log(txt);
  }
})();

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <input type="text" id="txtWord" name="search" placeholder="Search..." >
    </div>
    <div class="col-md-3"></div>
  </div>

  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <input type="text" name="search" placeholder="# Result..." id="inputNumResults">
    </div>
    <div class="col-md-3"></div>
  </div>

  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4 text-center">
      <button class="btn btn-success" type="button" id="buttonSearch">Search for words</button>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>

＆＃13;

Answer 4

您只需清除浏览器的缓存。完整的浏览器缓存可能会导致此类问题。

在HTMLButtonElement.onclick中未定义func

4 个答案: