2016-05-11 20 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