Javascript onclick函数html
[英]Javascript onclick function html
问题描述
I am trying to customize some public git, and because I am a noob in Jquery/Javascript I do not know how to properly bind an onclick function to the button, so that it will know how to call getStates() function. 
我正在尝试自定义一些公共git，并且由于我是Jquery / Javascript中的菜鸟，所以我不知道如何将onclick函数正确绑定到按钮，以便它知道如何调用getStates（）函数。 Yes I know that I could just remove $(function(){ and it would work, but I want to be able to call it within jquery function ? 是的，我知道我可以删除$(function(){并且它可以工作，但是我希望能够在jquery函数中调用它吗？
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>US Hospitals</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'>
</script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/lib/neo4j-web.min.js"></script>
</head>
<body>
<div id="desc">
<div class="row top-row">
<div class="col-xs-6">
<h3 class="heading">US Hospitals</h3>
</div>
<div class="col-xs-6">
<p class="lead"></p>
</div>
<button onclick="$.getStates();">Load States!</button>
</div>
</div>
<div id='map'></div>
<script>
$(function(){
function getStates() {
session
.run(districtQuery)
.then(function(result){
result.records.forEach(function(record) {
drawPolygons(parseWKTPolygons(record.get("wkt")),
record.get("text"));
});
})
}
</script>
</body>
</html>
I get the error saying : 我收到错误消息：
Uncaught TypeError: $.getStates is not a function at HTMLButtonElement.onclick (index.html:51)
4 个解决方案
解决方案1
2 2017-04-07 22:42:48
$(function () { })
This is telling the interpreter to run any JavaScript/jQuery code as soon as the page is ready. 这是告诉解释器在页面准备好后立即运行任何JavaScript / jQuery代码。 This are usually referred to as an onready function. 通常将其称为onready函数。 You don't typically create other functions inside of here. 您通常不会在此处创建其他函数。
Remove: 去掉：
$(function () { })
Also, the way you are creating the onclick event is wrong. 同样，您创建onclick事件的方式也是错误的。 Use getStates() instead of $.getStates() 使用getStates()代替$.getStates()
So all in all, your code should be changed as following: 因此，总的来说，您的代码应作如下更改：
<button onclick="getStates();">Load States!</button>
<script>
function getStates() {
session
.run(districtQuery)
.then(function(result){
result.records.forEach(function(record)
{
drawPolygons(parseWKTPolygons(record.get("wkt")),
record.get("text"));
});
});
}
</script>
Another way you could fix it is to leave your onready function and create the click event inside. 您可以解决的另一种方法是保留就绪功能并在其中创建click事件。 Your getStates() function still needs to be placed outside of the onready function though and you would remove the onclick from the button element. 尽管如此，您的getStates（）函数仍需要放置在onready函数之外，并且您将从按钮元素中删除onclick 。
For example: 例如：
<button>Load States!</button>
<script>
$(function() {
$('button').click(function () {
getStates();
});
});
function getStates() {
session
.run(districtQuery)
.then(function(result){
result.records.forEach(function(record) {
drawPolygons(parseWKTPolygons(record.get("wkt")),
record.get("text"));
});
})
}
</script>
Now if you have more than one button on this page, you will need to add an ID or class to distinguish them. 现在，如果此页面上有多个按钮，则需要添加一个ID或类来区分它们。 Then you'd replace $('button') with for example: $('#load_states_button) if using an ID or $('.button_class') if using a class. 然后，将$('button')替换为例如：如果使用ID， $('#load_states_button)如果使用类，则将$('.button_class') $('#load_states_button) 。
These all produce the same result, so how to do it is just a matter of personal preference. 这些都产生相同的结果，因此如何做只是个人喜好问题。
Hope this helped! 希望这对您有所帮助！ Let me know if you have any questions. 如果您有任何疑问，请告诉我。 :) :)
解决方案2
1 2017-04-07 22:25:40
You can make the function global: 您可以使函数成为全局函数：
window.getStates = function getStates() {
...
};
Then you can simply use getStates() in the onclick attribute. 然后，您可以简单地在onclick属性中使用getStates() 。
Of course, the cleaner way to do this would be to bind the event from JavaScript itself, using jQuery's $.click() . 当然，更干净的方法是使用jQuery的$.click()从JavaScript本身绑定事件。 This would require you to add an id attribute to the button tag, or some other way to identify it from jQuery. 这将需要您向按钮标签添加id属性，或通过其他方式从jQuery进行标识。
解决方案3
1 2017-04-07 22:26:49
Take the function out of $(function() { ... }) , because functions called from onclick have to be in the global scope. 从$(function() { ... })取出$(function() { ... }) ，因为从onclick调用的函数必须在全局范围内。 And call it as getStates() , not $.getStates() 并将其称为getStates() ，而不是$.getStates()
<script>
function getStates() {
session
.run(districtQuery)
.then(function(result){
result.records.forEach(function(record) {
drawPolygons(parseWKTPolygons(record.get("wkt")),
record.get("text"));
});
})
}
</script>
解决方案4
1 已采纳 2017-04-07 22:39:04
You could add an id to the button and use something like this: 您可以在按钮上添加一个id并使用如下代码：
<button id="load-states">Load States!</button>
Javascript: Javascript：
$(function() {
function getStates() {
session
.run(districtQuery)
.then(function(result){
result.records.forEach(function(record) {
drawPolygons(parseWKTPolygons(record.get("wkt")),record.get("text"));
});
})
}
// Adding event onClick to button
$('#load-states').on('click', getStates);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.