javascript onclick不能用于Android应用程序

时间:2012-08-28 23:32:29

标签: javascript android eclipse cordova

我正在尝试使用eclipse和phonegap开发一个Android应用程序。该应用程序是一个使用JavaScript的基本照明计算器。我正试图通过onclick调用文档头部的javascript函数来计算结果。我相信问题可能出在onclick =,onblur =或onfocus =。我的项目是时间敏感的,任何帮助将不胜感激。下面是我的代码,这里是一个显示代码工作的独立页面的链接。 http://www.everlastlight.com/energy_calc.html

<!DOCTYPE html> 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>EverLast&reg; Lighting</title> 
<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.1.1.css" /> 
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<!--<script src="../../js/calc.js"></script>-->
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/jquery.mobile-1.1.1.js"></script>
    <!--<script src="../../docs/_assets/js/calc1.js">-->
 </script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>

<script type="text/javascript">

function Calculate1()
{
            var no_fixtures1, hrs_yr1, cost_kwh1, watts1_1, watts2_1, invst1;
            var s_perfix$1, s_sitecost1_1, s_sitecost2_1, s_sav_yr1, s_recoup1, s_res1, s_res2_1;

                                            no_fixtures1 = document.basicecalc.no_fixtures1.value;
                                            hrs_yr1 = document.basicecalc.hrs_yr1.value;
                                            cost_kwh1 = document.basicecalc.cost_kwh1.value;
                                            watts1_1 = document.basicecalc.watts1_1.value;
                                            watts2_1 = document.basicecalc.watts2_1.value;
                                            invst1 = document.basicecalc.invst1.value;

                                            if ( watts1_1 == "" )
                                                            {alert("Please enter the wattage of the existing fixture");
                                                                            return;}

                                            //if ( watts2_1 == "" )
      //                  {alert("Please enter the wattage of the proposed fixture");
                                                                            //return;}
                                           else if ( no_fixtures1 == "" )
                            {alert("Please enter the number of fixtures at the site");
                            return;  }
         else{
                                                            s_perfix$1 = Math.round((watts1_1 - watts2_1)*(hrs_yr1)*(cost_kwh1)/10)/100;
                                                            s_sitecost1_1 = Math.round((watts1_1)*(hrs_yr1)*(no_fixtures1)*(cost_kwh1)/10)/100;
                                                            s_sitecost2_1 = Math.round((watts2_1)*(hrs_yr1)*(no_fixtures1)*(cost_kwh1)/10)/100;
                                                            s_sav_yr1 = Math.round((s_sitecost1_1-s_sitecost2_1)*100)/100;

                                                            s_res1 =(invst1/s_perfix$1)


                                                                            document.basicecalc.s_perfix$1.value   = "$"+ s_perfix$1;
                                                                            document.basicecalc.s_sitecost1_1.value = "$"+ s_sitecost1_1;
                                                                            document.basicecalc.s_sitecost2_1.value = "$"+ s_sitecost2_1;
                                                                            document.basicecalc.s_sav_yr1.value = "$"+ s_sav_yr1;


                                                                            if(invst1 !=="")
                                                                            {document.basicecalc.s_recoup1.value = Math.round(s_res1*12) + " months ("+ Math.round(s_res1*100)/100 + " yr.)";
                                                                            }

                                                            }

}

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}

function MM_findObj(n, d) { //v3.0
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_validateForm() { //v3.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
  if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
    if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
  } else if (test!='R') { num = parseFloat(val);
    if (val!=''+num) errors+='Please use only numbers.';
    if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
      min=test.substring(8,p); max=test.substring(p+1);
      if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert(errors);
document.MM_returnValue = (errors == '');
}
</script>   
</head> 
<body> 
<div data-role="page" class="type-interior">

<div data-role="header" data-theme="f">
    <h1>EverLast&reg;</h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->

<div data-role="content">

    <div class="content-primary">

    <h2>Basic Energy Calculator</h2>

    <p>
<div style="padding-right:0px;">
<p>Calculate energy savings by relamping your lighting system.<br>Also calculate the return on investment of the new system.<br><br>Fill in all the fields and click "calculate".<br><b>Your results will display below.</b></p>
</div>
<!--/body head :: Head Type B Ended -->



<!-- main body -->


<form name="basicecalc">


<!-- table 1 (user inputs) -->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="3"><span class="orange">*</span> Required<br> </td>
</tr>

<tr>
<td><span class="orange">*</span> Quantity of fixtures:  </td>
<td> </td>
<td><input type="text" style="text-align:right" name="no_fixtures1" maxlength="6" size="6" value="1"></td>
</tr>

<tr>
<td><span class="orange">*</span> Average operating hours per year:  </td>
<td> </td>
<td><input type="text" style="text-align:right" name="hrs_yr1" maxlength="6" size="6" value="4500"></td>
</tr>

<tr>
<td><span class="orange">*</span> Cost per kilowatt hour:  </td>
<td>$</td>
<td><input type="text" style="text-align:right" name="cost_kwh1" maxlength="6" size="6" value="0.10"></td>
</tr>

<tr>
<td><span class="orange">*</span> Watts (per fixture) used in existing system:  </td>
<td> </td>
<td><input type="text" style="text-align:right" name="watts1_1" maxlength="6" size="6" onblur="MM_validateForm('watts1_1','','NisNum');return document.MM_returnValue"></td>
</tr>

<tr>
<td><span class="orange">*</span> Watts (per fixture) used in new system:  </td>
<td> </td>
<td><input type="text" style="text-align:right" name="watts2_1" maxlength="6" size="6"   onblur="MM_validateForm('watts2_1','','NisNum');return document.MM_returnValue"></td>
</tr>

<tr>
<td><span class="orange">*</span>Cost to upgrade each fixture:  </td>
<td>$</td>
<td><input type="text" style="text-align:right" name="invst1" maxlength="6" size="6" onblur="MM_validateForm('invst1','','NisNum');return document.MM_returnValue"></td>
</tr>

<tr>
<td colspan="2"> </td>
<td align="right"> <input name="calcbtn" type="button" class="calcbtn" title="Calculate" value="Calculate" onclick="Calculate1()">
</td>
</tr>

</table>
<a href="javascript:MM_callJS('Calculate1()');" data-role="button">Calculate</a>
</div>
<!-- / table 1 (user inputs) -->
<hr>
<br>
<div class="resultsLabel">Results</div>



<!-- table 2 (results) -->
<div class="resultsBlock">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<br>
<div><b>Cost of Electricity:</b></div>
    <!-- table 2a -->
    <div>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td>Current system:  </td>
    <td align="right"><input type="text" style="text-align:right" class="result" name="s_sitecost1_1" maxlength="8" readOnly onfocus="this.blur()" size="8">           </td>
    <td>&nbsp;/yr.</td>
    </tr>
    <tr>
    <td>Proposed system:</td>

    <td align="right"><input type="text" style="text-align:right" class="result" name="s_sitecost2_1" maxlength="8" readOnly onfocus="this.blur()" size="8" onblur="MM_validateForm('s_sitecost2_1','','NisNum');return document.MM_returnValue"></td>
    <td>&nbsp;/yr.</td>
    </tr>
    </table>
    </div>
    <!-- / table 2a -->
</td>
</tr>
<tr>
<div><b>Energy Savings (with proposed system)</b></div>

    <!-- table 2b -->
    <div>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td>Each fixture:</td>
    <td align="right"><input type="text" style="text-align:right" class="result" name="s_perfix$1" maxlength="8" readOnly onfocus="this.blur()" size="8">      </td>
    <td>&nbsp;/yr.</td>
    </tr>

    <tr>
    <td>Total:</td>
    <td align="right"><input type="text" style="text-align:right" class="result" name="s_sav_yr1" maxlength="10" readOnly onfocus="this.blur()" size="8">   </td>
    <td>&nbsp;/yr.</td>
    </tr>
    </table>
    </div>
    <div style="margin-top:12px;">* This cost should include the lamp, ballast, and labor required to replace the fixture. You may want to subtract any costs that would have been incurred with the current system.</div>
</tr>

</table>        

    </p>


    </div><!--/content-primary -->      

    <div class="content-secondary">

        <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

                <h3>More in this section</h3>

                <ul data-role="listview"  data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="watts.html">Watts Per Sq. Ft.</a></li>
            <li><a href="lightinglayout.html">Lighting Layout</a></li>
            <li><a href="fixreplace.html">Fixture Replacement</a></li>
            <li><a href="dimming.html">Dimming Watts</a></li>
            <li><a href="costwait.html">Cost of Waiting</a></li>
            <li><a href="samplelife.html">Simple Life Cycle</a></li>

                </ul>
        </div>
    </div>      

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c" align="center">
        <p>&copy; 2012 EverLast&reg;. All Rights Reserved.</p>
</div>  

1 个答案:

答案 0 :(得分:0)

这个java脚本调用可能与phonegap jquery移动android应用程序有问题。你正在做一个纯粹的HTML JavaScript调用。

在phonegap-jquery mobile中,在加载任何脚本之前,你必须在phonegap方法中检查设备。

请仔细阅读以下示例,

包含所有库(jquery mobile js,css和phonegap js)后,打开一个脚本并添加以下代码,

<script type="text/javascript" charset="utf-8">
     function onLoad(){

          document.addEventListener("deviceready", onDeviceReady, true);

     }
function onDeviceReady(){
/*use selectors to trigger a event*/
/*here you can call the javascript events with jquery live method*/
}
      </script>

此格式可以帮助您