2016-05-11 22 views
0

我想在Javascript中调用一个函数,但它不工作。JavaScript不能在科尔多瓦与温泉

我没有在温泉网站和Google上找到任何参考。

任何人都可以告诉我在JavaScript中调用函数的精确步骤是什么?

我需要在index.js文件中定义函数还是可以在脚本标记中的同一个文件中写入函数?

我使用温泉2

My Project Link

我也曾询问过关于 JQuery但没有解决办法还没有类似的问题。

p1.html

<body onload="onLoad()"> 

<ons-page> 
<ons-button id="demo" onclick="printMsg()">Click Me</ons-button> 
</ons-page> 

index.js

function onLoad() { 
    document.addEventListener("deviceready", onDeviceReady, false); 

    } 


function onDeviceReady() { 

    document.getElementById('demo').addEventListener("click", printMsg, 
    false); 
    document.getElementById('btnNext').addEventListener("click", 
    callNextPage, false); 
    document.addEventListener("pause", onPause, false); 
    document.addEventListener("resume", onResume, false); 
    document.addEventListener("menubutton", onMenuKeyDown, false); 

} 


function printMsg() { 
    ons.notification.alert('Hello'): 
    //alert('hello'); 
    //document.addEventListener("deviceready", onDeviceReady, false); 

} 

输出错误消息:

“未捕获的ReferenceError:printMsg没有定义”,来源: file:///android_asset/www/index.html

编辑:

我已经上传我的项目在FileDropper

+0

删除内联事件处理程序,以便按钮只是...'<插件按钮ID =“演示”>点击我'。这不应该解决它,但你不需要,因为你是在设备准备功能分配处理程序 – Archer

+0

@Archer我试过它不工作 –

回答

0

要结合使用多种方式来调用功能,这将可能互相冲突。此外,您不需要浏览所有用来显示警报的JS。此代码,在其最简单的形式:

<ons-page> 
    <ons-toolbar> 
    <div class="center">My app</div> 
    </ons-toolbar> 

    <p style="text-align: center"> 
    <ons-button onclick="ons.notification.alert('Hello world!')">Click me!</ons-button> 
    </p> 
</ons-page> 

开始与温泉学习新的和最好的方式,是通过他们的新教程网站:http://tutorial.onsen.io/

附加的注释,你问,你的所有的JS必须位于index.html文件中,可以直接或通过脚本标记链接到JS文件。

为了证明与功能上面,下面的代码提供:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="mobile-web-app-capable" content="yes" /> 
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'> 
    <title>Onsen UI 2.0 Quickstart</title> 

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/css/onsenui.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/css/onsen-css-components.css"> 
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.2/js/onsenui.js"></script> 
    <script src="components/loader.js"></script> 

    <script> 
     function sampleAlert(){ 
      ons.notification.alert('Hello world!'); 
     } 
    </script> 
</head> 

<body> 

<ons-page> 
    <ons-toolbar> 
    <div class="center">My app</div> 
    </ons-toolbar> 

    <p style="text-align: center"> 
    <ons-button onclick="sampleAlert()">Click me!</ons-button> 
    </p> 
</ons-page> 

</body> 
</html> 

只是复制到一个温泉项目,并确认loader.js文件是正确的文件夹,它会运行。

希望这会有所帮助!

编辑:

回顾你的项目,你没有正确使用温泉。除index.html以外的任何页面都不包含html头标记,CSS或JS。您必须将您的应用视为一个巨型单页网站。将所有内容重新定位到index.html文件,这将解决您的问题。

目前你(减少了简洁和代码的保护):

Menus.html

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Security-Policy"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/onsenui.css"> 
    <link rel="stylesheet" type="text/css" href="css/onsen-css-components.css"> 
    <link rel="stylesheet" type="text/css" href="css/sliding_menu.css"> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 

    <script type="text/javascript" src="js/angular/angular.min.js"></script> 
    <script type="text/javascript" src="js/jquery/dist/jquery.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/onsenui.min.js"></script> 
    <script type="text/javascript" src="js/angular-onsenui.min.js"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 

    </head> 

    <body> 

    <ons-page> 

     <ons-toolbar style="background-color: #6ae2b3"> 
     <div class="center">Menu</div> 
     <div class="right"> 
      <ons-toolbar-button> 
      <ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
     </ons-toolbar> 

     <ons-tabbar var="navi" position="top"> 
     <ons-tab page="indian.html" active="true"></ons-tab> 
     <ons-tab page="english1.html" ></ons-tab> 
     <ons-tab page="englishpage.html"></ons-tab> 
     <ons-tab page="advance.html"></ons-tab> 
     <ons-tab page="drinkspage.html"></ons-tab> 
     </ons-tabbar> 

     <div class="navigation-bar" style="background:#6ae2b3"> 
     <div class="navigation-bar__center"> 
      <div class="button-bar" style="width:100%;padding:8px;box-sizing:border-box"> 
      <div class="button-bar__item" ng-click="navi.setActiveTab(0)"> 
       <input type="radio" name="navi-segment-a" checked> 
       <div class="button-bar__button">Indian</div> 
      </div> 

      <div class="button-bar__item" ng-click="navi.setActiveTab(2)"> 
       <input type="radio" name="navi-segment-a"> 
       <div class="button-bar__button">English</div> 
      </div> 

      <div class="button-bar__item" ng-click="navi.setActiveTab(4)"> 
       <input type="radio" name="navi-segment-a"> 
       <div class="button-bar__button">Drinks</div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </ons-page> 

它需要仅仅是这样的(未完成只是一个简单的例子),所有的你的功能代码移到index.html的:

<ons-page> 

    <ons-toolbar style="background-color: #6ae2b3"> 
    <div class="center">Menu</div> 
    <div class="right"> 
     <ons-toolbar-button> 
     <ons-icon icon="ion-plus" fixed-width="false" style="vertical-align: -4px;"></ons-icon> 
     </ons-toolbar-button> 
    </div> 
    </ons-toolbar> 

    <ons-tabbar var="navi" position="top"> 
    <ons-tab page="indian.html" active="true"></ons-tab> 
    <ons-tab page="english1.html" ></ons-tab> 
    <ons-tab page="englishpage.html"></ons-tab> 
    <ons-tab page="advance.html"></ons-tab> 
    <ons-tab page="drinkspage.html"></ons-tab> 
    </ons-tabbar> 

    <div class="navigation-bar" style="background:#6ae2b3"> 
    <div class="navigation-bar__center"> 
     <div class="button-bar" style="width:100%;padding:8px;box-sizing:border-box"> 
     <div class="button-bar__item" ng-click="navi.setActiveTab(0)"> 
      <input type="radio" name="navi-segment-a" checked> 
      <div class="button-bar__button">Indian</div> 
     </div> 

     <div class="button-bar__item" ng-click="navi.setActiveTab(2)"> 
      <input type="radio" name="navi-segment-a"> 
      <div class="button-bar__button">English</div> 
     </div> 

     <div class="button-bar__item" ng-click="navi.setActiveTab(4)"> 
      <input type="radio" name="navi-segment-a"> 
      <div class="button-bar__button">Drinks</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</ons-page> 
+0

嗨Munsterlander它不适合我btw我没有装载机。 js文件是否有必要? –

+0

不是根据新的温泉文档,但如果它不工作,那么你没有安装温泉。请参考https://onsen.io/getting-started.html开始。 – Munsterlander

+0

最简单的入门方法是使用免费的Monaca云端IDE https://monaca.io/cloud.html确保您立即无误地运行。 – Munsterlander