I am having issues getting a button click to call a function. In my code I tried 2 different ways of getting the button to call the function, no luck. Currently, am using onclick to call the function that simply logs a string, but I get a “Uncaught ReferenceError: camCapture is not defined” error in the console.
我遇到了一些问题:单击按钮来调用函数。在我的代码中，我尝试了两种不同的方法来获取按钮来调用这个函数，但是没有运气。目前，我使用onclick来调用简单记录字符串的函数，但是我得到了一个“未捕获的参考错误:camCapture在控制台中没有定义”错误。
I think the issue may have to do with the order of script declaration.
我认为这个问题可能与脚本声明的顺序有关。
<!DOCTYPE HTML>
<html>
<head>
<title>Campus Kitchens</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/codiqa.ext.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<style type="text/css">
#map{
height: 225px;
}
</style>
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="phonegap.js"></script>
<script src="js/codiqa.ext.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/campuskitchens.js"></script>
<script type="text/javascript">
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function camCapture(){
console.log("Over here!");
}
</script>
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
Campus Kitchen
</h3>
</div>
<div data-role="content">
<div data-role="fieldcontain" data-controltype="camerainput">
<button onclick="camCapture()" data-role="button">Capture Picture of Food</button>
<img style="display:none; width:60px; height:60px;" id="smallImage" src="" />
</div>
</div>
Full code: http://jsfiddle.net/4dqrhbft/
完整代码:http://jsfiddle.net/4dqrhbft/
2 个解决方案
#1
2
The function is (pointlessly) defined inside a "ready" handler, so it's not a global function.
函数在“ready”处理程序中定义(没有意义)，因此它不是全局函数。
Move the event handler out of that function. If you can't, because it relies on access to other symbols in the "ready" handler, then you'll have to change the way you set up the event handler (which you should do anyway) and do it with jQuery.
将事件处理程序移出该函数。如果不能，因为它依赖于对“ready”处理程序中的其他符号的访问，那么您必须更改设置事件处理程序的方式(无论如何您都应该这样做)，并使用jQuery进行。
#2
1
In your fiddle, change the second option from onLoad to No wrap - in <head>:
在小提琴中，将第二个选项从onLoad更改为No wrap - In :
Otherwise, the onLoad and camCapture functions are not attached to the body or the button.
否则，onLoad和camCapture函数不会附加到主体或按钮上。
You'll then see "Over here!" in the console when you click the button.
当您单击按钮时，您将在控制台中看到“在这里!”
#1
2
The function is (pointlessly) defined inside a "ready" handler, so it's not a global function.
函数在“ready”处理程序中定义(没有意义)，因此它不是全局函数。
Move the event handler out of that function. If you can't, because it relies on access to other symbols in the "ready" handler, then you'll have to change the way you set up the event handler (which you should do anyway) and do it with jQuery.
将事件处理程序移出该函数。如果不能，因为它依赖于对“ready”处理程序中的其他符号的访问，那么您必须更改设置事件处理程序的方式(无论如何您都应该这样做)，并使用jQuery进行。
#2
1
In your fiddle, change the second option from onLoad to No wrap - in <head>:
在小提琴中，将第二个选项从onLoad更改为No wrap - In :
Otherwise, the onLoad and camCapture functions are not attached to the body or the button.
否则，onLoad和camCapture函数不会附加到主体或按钮上。
You'll then see "Over here!" in the console when you click the button.
当您单击按钮时，您将在控制台中看到“在这里!”