Question

我在点击按钮来调用函数时遇到问题。在我的代码中，我尝试了两种不同的方式来获取按钮来调用函数，没有运气。目前，我使用onclick来调用简单记录字符串的函数，但是我在控制台中收到“未捕获的ReferenceError：camCapture未定义”错误。

我认为这个问题可能与脚本声明的顺序有关。

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

完整代码： http://jsfiddle.net/4dqrhbft/

Answer 1

该函数（无意义地）在“就绪”处理程序中定义，因此它不是全局函数。

将事件处理程序移出该函数。如果你不能，因为它依赖于访问“就绪”处理程序中的其他符号，那么你将不得不改变你设置事件处理程序的方式（你应该做的事情）并使用jQuery来做。 / p>

Answer 2

在你的小提琴中，将第二个选项从onLoad更改为No wrap-in＆lt; head＆gt;：

enter image description here

否则，onLoad和camCapture功能未附加到正文或按钮上。

然后你会看到“在这里！”单击按钮时在控制台中。

未捕获的ReferenceError :(给定函数）未定义

2 个答案: