2017-04-20 64 views
-1

我試圖創建一個簡單的網頁使用Flask,我試圖捕獲在JavaScript變量中的文本框中寫入的文本,然後顯示它在控制檯上,當用戶按下一個按鈕。func未定義在HTMLButtonElement.onclick

下面是代碼

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

有什麼問題?什麼錯誤? – evolutionxbox

+0

顯然我的功能沒有被定義 未捕獲的ReferenceError:Gettext是非在HTMLButtonElement.onclick – PCalle100

+0

什麼SRC =「{{url_for的'的輸出定義 ( '靜態',文件名= 'JS/main.js')} }「'看起來像? – evolutionxbox

回答

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文件的順序。

一定要檢查什麼控制檯顯示,當我用「上載」加載類型很清楚返回了一個錯誤,該函數沒有被定義

+1

因此,它被接受的答案以及它的票選?任何理由嗎? –

0

使用。價值爲輸入,不.innerHTML

+0

謝謝,但它仍然輸出相同的錯誤 – PCalle100

+0

請您發佈錯誤消息。幫助我,幫助你:) –

0

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

 
    function getText() { 
 
    var txt = document.getElementById('txtWord').value; 
 
    console.log(txt); 
 
    } 
 
})();
<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>

+1

Downvote?我做錯什麼了嗎?對不起,提供了一個可行的解決方案... – Badacadabra

相關問題