javascript - func 未在 HTMLButtonElement.onclick 中定义

Question

我正在尝试使用 Flask 创建一个简单的网页，我正在 try catch 在 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 文件的顺序。

始终检查控制台显示的内容，当我使用“On load”加载类型时，它清楚地返回一个错误，指出函数未定义