Javascript func 未在 HTMLButtonElement.onclick 中定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43524108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
func is not defined at HTMLButtonElement.onclick
提问by Tomasz Grochowski
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.
我正在尝试使用 Flask 创建一个简单的网页，我正在尝试捕获在 javascript 变量中的文本字段中写入的文本，然后在用户按下按钮时将其显示在控制台上。
Here is the code
这是代码
HTML
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
Javascript
function getText() {
var txt = document.getElementById('txtWord').innerHTML;
console.log(txt);
}
回答by Tomasz Grochowski
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/
https://jsfiddle.net/ovtkmnmn/3/
I believe in Your case the problem is about order of loading this js file.
我相信在您的情况下，问题在于加载此 js 文件的顺序。
Always check what console displays, when I used "On load" load type it clearly returned an error that the function is not defined
始终检查控制台显示的内容，当我使用“加载时”加载类型时，它清楚地返回了未定义函数的错误
回答by Badacadabra
(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>回答by Kourosh
You should simply clear your browser's cache. A full browser's cache can cause such a problem.
您应该简单地清除浏览器的缓存。完整的浏览器缓存可能会导致此类问题。
