jQuery的移動JavaScript計算器

Question

我對javascript非常陌生，我正在嘗試使用Jquery Mobile構建一個移動應用程序。 我希望用戶在每頁上輸入一個值，然后在最后一頁上，他們將單擊“提交”，它將在最后一頁上顯示該值。 我已經進行了大約4個小時的工作，我可以將計算結果與“提交”按鈕放在同一頁面上，但不能在下一頁上使用。

    <script>

        function sum()
{


    var item1num = document.getElementById('item1num').value;
    var item2num = document.getElementById('item2num').value;

        {result = parseInt(item1num)*parseInt(item2num);

        document.getElementById("showResult").innerHTML = (result);}}

    </script>

</head>
<body>
    <!-- Home -->
    <div data-role="page" id="page1">
        <div data-role="content">
            <div data-role="fieldcontain" id="item1">
                <fieldset data-role="controlgroup">
                    <label for="item1">
                        item1
                    </label>
                    <input name="item1num" id="item1num" placeholder="" value="" type="number" />
                </fieldset>
            </div>
            <a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
                Next
            </a>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <div data-role="fieldcontain" id="item1">
                <fieldset data-role="controlgroup">
                    <label for="item2">
                        item2
                    </label>
                    <input name="item2num" id="item2num" placeholder="" value="" type="number" />
                </fieldset>
            </div>
            <input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
            <span id="showResult"></span>
        </div>
    </div>
    <div data-role="page" id="page3">
        <div data-role="content">
            <span id="showResult"></span>
        </div>
    </div>

Answer 1

您需要將該值傳遞給提交表單的頁面

// page1

<form action="page2" method="post">
    <input type="text" name="value1"/>
    <input type="text" name="value2"/>
    <input type="submit" />
</form>

因此，在另一頁中，您可以同時使用它們和

// page2

<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>

要用jQuery做到這一點，你可以做

var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');

Answer 2

請嘗試以下代碼，它將在最后一頁顯示結果。

<!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title> 

        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
        function sum()
    {

        var item1num = document.getElementById('item1num').value;
        var item2num = document.getElementById('item2num').value;


            {result = parseInt(item1num)*parseInt(item2num);
            document.getElementById("showResult").innerHTML = "Result is: "+(result);}
    }

        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-role="content">
                <div data-role="fieldcontain" id="item1">
                    <fieldset data-role="controlgroup">
                        <label for="item1">
                            item1
                        </label>
                        <input name="item1num" id="item1num" placeholder="" value="" type="number" />
                    </fieldset>
                </div>
                <a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
                    Next
                </a>
            </div>
        </div>
        <div data-role="page" id="page2">
            <div data-role="content">
                <div data-role="fieldcontain" id="item1">
                    <fieldset data-role="controlgroup">
                        <label for="item2">
                            item2
                        </label>
                        <input name="item2num" id="item2num" placeholder="" value="" type="number" />
                    </fieldset>
                </div>
                <a href="#page3" data-role="button" data-theme="b" data-transirion="slidefade" onclick="sum();">B</a>
            </div>
        </div>
        <div data-role="page" id="page3">
            <div data-role="content">
                <span id="showResult"></span>
            </div>
        </div>
    </body>
    </html>

jQuery的移動JavaScript計算器

問題描述

2 個解決方案

解決方案1
0 2013-02-26 02:02:58

解決方案2
0 已采納 2013-02-26 05:08:45

jQuery的移動JavaScript計算器

問題描述

2 個解決方案

解決方案1 0 2013-02-26 02:02:58

解決方案2 0 已采納 2013-02-26 05:08:45

解決方案1
0 2013-02-26 02:02:58

解決方案2
0 已采納 2013-02-26 05:08:45