I'm trying to create a simple webpage using Flask, I'm trying to capture the text written in a textfield in a javascript variable and then display it on console, when the user presses a button.

Here is the code

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);
}

I'm trying to create a simple webpage using Flask, I'm trying to capture the text written in a textfield in a javascript variable and then display it on console, when the user presses a button.

Here is the code

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);
}

• javascript
• html
• button
• onclick

• What's the issue? What error? – evolutionxbox Commented Apr 20, 2017 at 15:47
• Apparently my function is not defined Uncaught ReferenceError: getText is not defined at HTMLButtonElement.onclick – user5880181 Commented Apr 20, 2017 at 15:52
• What does the output of src="{{url_for('static',filename='js/main.js')}}" look like? – evolutionxbox Commented Apr 20, 2017 at 15:53
• Since I'm using flask, all sources must be that way, it isn't a 404 error, because flask can find my file, the output of the file should be whatever I put in the textfield "txtWord" – user5880181 Commented Apr 20, 2017 at 16:00
• So what does console.log(txt) outputs on your console?, – Iron Fist Commented Apr 20, 2017 at 16:08

4 Answers 4

Here is working solution

<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/

I believe in Your case the problem is about order of loading this js file.

Always check what console displays, when I used "On load" load type it clearly returned an error that the function is not defined

You should simply clear your browser's cache. A full browser's cache can cause such a problem.

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

  document.getElementById('buttonSearch').addEventListener('click', getText, true);
})();

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

I was having the same problem using jQuery until I figure out that I declared the function inside the $(document).ready() method :

    $(document).ready(function () {
      function name(){}  // not working
    }