Question

我是JS和phonegap的新手，而且我很难添加2个数字并乘以频率选择器RRfreq。

我似乎无法使任何代码工作我只是想知道是否可以将输入范围读取为整数或浮点数。

另外，我准备好了RRfreq还是我需要编写一些内容来准确读取所选内容。

这里是JavaScript：

<script type="text/javascript" language="JavaScript">
  function calcNumbers() {
    <!-- window.location='#stuff'; -->
    var hrs = document.getElementById("NumHours").value;
    var peeps = document.getElementById("NumPeople").value;
    var freq = document.getElementById("RRfreq").value;

    var ansD=document.getElmentById("answer");
    ansD.value= hrs * peeps;


    var x = (NumHours + NumPeople) * RRFreq;


    document.getElementById("demo").innerHTML = x;


    alert('testing');
  }
</script>

这就是我的PhoneGap HTML所拥有的内容：

<div id="Small Tank" data-role="page" data-theme="f">
<header data-role="header" data-position="fixed" data-id="appHeader">
    <h1>Tanks</h1>
    <a href="#homeScreen" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-btn-left ui-nodisc-icon ui-alt-icon">Back</a>
</header>
<div data-role="content">


    <h1 class="center">Tanks</h1>


  <!--  <div id="form"> -->
    <!-- <form id="calcUsage" data-ajax='false'> -->
  <!--  <form method=post action="" id="calcUsage">-->
        <div data-role="fieldcontain">
            <label for="PeopleSlider">Number of People:</label>
            <input type="range" name="NumPeople" id="NumPeople" value="100" min="100" max="200" /> 
            <p>&nbsp;</p>
        </div>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Frequency of RR Usage in Hours</legend>
                <input name="RRfreq" type="radio" id="RRfreq_1" title="1" value="1" />
                <label for="RRfreq_1">1.0</label>
                <input name="RRfreq" type="radio" id="RRfreq_15" title="15" value="1.5" />
                <label for="RRfreq_15">1.5</label>
                <input name="RRfreq" type="radio" id="RRfreq_2" title="2" value="2" />
                <label for="RRfreq_2">2.0</label>           
            </fieldset>
             <p>&nbsp;</p>
        </div>

        <div data-role="fieldcontain">
            <label for="TimeSlider">Number of Hours:</label>
            <input type="range" name="NumHours" id="NumHours" value="1" min="1" max="8" /> 
        </div>
        <input type="submit" data-theme="f" name="submit" value="Calculate Usage" onClick="javascript:calcNumbers()">

        Answer= <input type="text" id="answer" name="answer" value="" />

   <!-- </form> -->
<!--    </div> --> <!-- form -->

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

我添加了一个重定向网址，看看我是否甚至踩到了我的功能而且我 - 我似乎无法收到警告消息弹出，但我认为我的弹出式浏览器可能会阻止它。关于调试在PhoneGap中运行的JavaScript的任何建议都会非常感激：）

Answer 1

一般来说，逻辑很好。您需要纠正一些HTML和Javascript才能使其正常工作。

在HTML上

选择一个默认的单选按钮（这会阻止您的计算崩溃，因为它默认包含一个值，这是一个很好的做法）
将计算按钮的type="submit"更改为type="button"这会阻止网页重新加载（如果您打算发帖，请将其保留为type="submit"

在Javascript上

在这里你可以改进很多东西。我为你创建一个JSFiddle，看看它是如何工作的。请阅读Javascript上的评论。

https://jsfiddle.net/saq8yyv0/14/

调试建议

即使这是一个phonegap应用程序，您也可以轻松调试在浏览器上运行的Javascript。我更喜欢Chrome。只需打开开发人员工具（ctrl + shift + i）并选择sources选项卡。在这里你可以找到一些documentation about it。这是tools and techniques上用于调试phonegap应用程序的更加扩展的列表，但通常您可以使用chrome开发人员工具进行几乎所有调试

PhoneGap Forms从“输入范围”滑块添加2个数字

1 个答案: