更新了代码

Question

我正在创建一个phonegap应用程序，我创建了一个html5页面，其子页面为DIV，但是我无法将javascript计算值放在我的结果dash div中。谁能帮我解决这个问题？

我想在div id中加上变量'A'的值 - timetvA

div id中的变量raw - timetvCPTM

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/custom.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function(){
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script>

function timesaving(){
var  A  ;
var B ;
var C ;
var D ;
var E ;
A  = document.getElementById('timeA');
B = document.getElementById('timeB');
C = document.getElementById('timeC');
D = document.getElementById('timeD');
E = document.getElementById('timeE');


var raw = C * (E / 100);
var     loss = (E * raw) / 100;
var     tech = raw + loss;
var     rraw = ttech * B;
var     tdum = rraw / C;

}
</script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>

<body>
<div id="inputdash" data-role="page" data-theme="b" >
  <div data-role="header" >
    <h1>Calculations</h1>
  </div>
  <div class="ui-grid-a">
    <div align="center"><img src="images/iclogo.PNG" width="307" height="66" alt="logo"> </div>
  </div>
  <button >1 - Input Models</button>
  <ul data-role="listview" data-inset="true" data-theme="c">
    <li><a href="#input1">Details<span class="ui-li-count">2</span></a></li>
  </ul>

  <a href="#resultdash">
  <button data-theme="a" onClick="return timesaving();"> See Results</button>
  </a>
  <div data-role="footer" data-position="fixed">
    <h4 align="center">hello world</h4>
  </div>
</div>
</div>
<div data-role="page" id="input1" data-theme="b">
  <div data-role="header" >
    <h1>save</h1>
  </div>
  <div class="ui-grid-a"><img src="images/iclogo.PNG" width="307" height="66" alt="logo"> </div>
  <div data-role="fieldcontain" >
    <label for="timeA">Name:</label>
    <input type="text" name="timeA" id="timeA" value=""  />
    <label for="timeB">Age:</label>
    <input type="text" name="timeB" id="timeB" value=""  />
    <label for="timeC">weight kg:</label>
    <input type="text" name="timeC" id="timeC" value=""  />
    <label for="timeD">Hight:</label>
    <input type="text" name="timeD" id="timeD" value=""  />
    <label for="timeE">Pocket Money:</label>
    <input type="text" name="timeE" id="timeE" value=""  />

  </div>
  <a href="#inputdash">
  <button data-icon="arrow-r">Next</button>
  </a>
  <div data-role="footer" data-position="fixed">
    <h4 align="center">hello</h4>
  </div>
</div>
</div>
<div data-role="page" id="resultdash" data-theme="b">
  <div data-role="header" >
    <h1>Time Results</h1>
  </div>
  <div class="ui-grid-a"><img src="images/iclogo.PNG" width="307" height="66" alt="logo"> </div>
  <div data-role="content">
    <center>
      <h3>Name:
        <div id="timetvA"></div>
      </h3>
    </center>

    </div>
    <div data-role="collapsible-set">
      <div data-role="collapsible" data-inset="true">
        <h3>Play</h3>
        <div class="ui-grid-a" >
          <div id="timetvCPTM" class="ui-block-a" align="right" ></div>
          <div class="ui-block-b">&ensp; Minutes</div>
        </div>
        <div class="ui-grid-a" >
          <div  class="ui-block-a" >1. candy crush: &ensp;</div>

      </div>
    </div>
    <div data-role="collapsible" data-collapsed="true">
      <h3>Home</h3>
      <div class="ui-grid-a" >
        <div class="ui-block-b" id="timetvICM">Home</div>
        <div id="timetvICMn" ></div>
      </div>
      <div class="ui-grid-a" >
        <div  class="ui-block-a" >1. home: &ensp;</div>
        <div id="timetvIC1" class="ui-block-b" ></div>
      </div>

      </div>
    </div>
    <div data-role="collapsible" data-collapsed="true">
      <h3>Class </h3>
      <div class="ui-grid-a" >
        <div class="ui-block-b" id="timetvICM">Time of play</div>
        <div id="timetvPAMn" ></div>
      </div>
      <div class="ui-grid-a" >
        <div  class="ui-block-a" >1. variable class: &ensp;</div>
        <div id="timetvPA1" class="ui-block-b" ></div>
      </div>
      <div class="ui-grid-a" >
        <div  class="ui-block-a" >2. variable: &ensp;</div>
        <div id="timetvPA2" class="ui-block-b" ></div>


    </div>
  </div>
</div>
<div data-role="footer" data-position="fixed">
  <h4 align="center">Hello world</h4>
</div>
</div>
</div>
</body>
</html>

感谢和问候

Answer 1

A = $("#timeA").val();
B = $("#timeB").val();
C = $("#timeA").val();
D = $("#timeC").val();
E = $("#timeE").val();

$('#timetvA').append(A);
$('#timetvCPTM').append(raw);

更新了代码

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>home</title>
  <link rel="stylesheet" href="themes/style.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 </head>
 <script>
  function timesaving(){
  var  A  ;
  var B ;
  var C ;
  var D ;
  var E ;

  A = $("#timeA").val();
  B = $("#timeB").val();
  C = $("#timeA").val();
  D = $("#timeC").val();
  E = $("#timeE").val();
  alert(A)

  $('#timetvA').append(A);
  var ttech = 1;
  var raw = C * (E / 100);
  var     loss = (E * raw) / 100;
  var     tech = raw + loss;
  var     rraw = ttech * B;
  var     tdum = rraw / C;

  $('#timetvCPTM').append(raw);


  }
  </script>
 <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
 </head>
 <body>
  <div id="inputdash" data-role="page" data-theme="b" >
     <div data-role="header" >
        <h1>Calculations</h1>
     </div>
     <div class="ui-grid-a">
        <div align="center"><img src="images/iclogo.PNG" width="307" height="66" alt="logo"> </div>
     </div>
     <button >1 - Input Models</button>
     <ul data-role="listview" data-inset="true" data-theme="c">
        <li><a href="#input1">Details<span class="ui-li-count">2</span></a></li>
     </ul>
     <a href="#resultdash">
     <button data-theme="a" onClick="return timesaving();"> See Results</button>
     </a>
     <div data-role="footer" data-position="fixed">
        <h4 align="center">hello world</h4>
     </div>
  </div>
  </div>
  <div data-role="page" id="input1" data-theme="b">
     <div data-role="header" >
        <h1>save</h1>
     </div>
     <div class="ui-grid-a"><img src="images/iclogo.PNG" width="307" height="66" alt="logo"> </div>
     <div data-role="fieldcontain" >
        <label for="timeA">Name:</label>
        <input type="text" name="timeA" id="timeA" value=""  />
        <label for="timeB">Age:</label>
        <input type="text" name="timeB" id="timeB" value=""  />
        <label for="timeC">weight kg:</label>
        <input type="text" name="timeC" id="timeC" value=""  />
        <label for="timeD">Hight:</label>
        <input type="text" name="timeD" id="timeD" value=""  />
        <label for="timeE">Pocket Money:</label>
        <input type="text" name="timeE" id="timeE" value=""  />
     </div>
     <a href="#inputdash">
     <button data-icon="arrow-r">Next</button>
     </a>
     <div data-role="footer" data-position="fixed">
        <h4 align="center">hello</h4>
     </div>
  </div>
  </div>
  <div data-role="page" id="resultdash" data-theme="b">
     <div data-role="header" >
        <h1>Time Results</h1>
     </div>
     <div class="ui-grid-a"><img src="images/iclogo.PNG" width="307" height="66" alt="logo"> </div>
     <div data-role="content">
        <center>
           <h3>
              Name:
              <div id="timetvA"></div>
           </h3>
        </center>
     </div>
     <div data-role="collapsible-set">
        <div data-role="collapsible" data-inset="true">
           <h3>Play</h3>
           <div class="ui-grid-a" >
              <div id="timetvCPTM" class="ui-block-a" align="right" ></div>
              <div class="ui-block-b">&ensp; Minutes</div>
           </div>
           <div class="ui-grid-a" >
              <div  class="ui-block-a" >1. candy crush: &ensp;</div>
           </div>
        </div>
        <div data-role="collapsible" data-collapsed="true">
           <h3>Home</h3>
           <div class="ui-grid-a" >
              <div class="ui-block-b" id="timetvICM">Home</div>
              <div id="timetvICMn" ></div>
           </div>
           <div class="ui-grid-a" >
              <div  class="ui-block-a" >1. home: &ensp;</div>
              <div id="timetvIC1" class="ui-block-b" ></div>
           </div>
        </div>
     </div>
     <div data-role="collapsible" data-collapsed="true">
        <h3>Class </h3>
        <div class="ui-grid-a" >
           <div class="ui-block-b" id="timetvICM">Time of play</div>
           <div id="timetvPAMn" ></div>
        </div>
        <div class="ui-grid-a" >
           <div  class="ui-block-a" >1. variable class: &ensp;</div>
           <div id="timetvPA1" class="ui-block-b" ></div>
        </div>
        <div class="ui-grid-a" >
           <div  class="ui-block-a" >2. variable: &ensp;</div>
           <div id="timetvPA2" class="ui-block-b" ></div>
        </div>
     </div>
  </div>
  <div data-role="footer" data-position="fixed">
     <h4 align="center">Hello world</h4>
  </div>
  </div>
  </div>
 </body>

Answer 2

我之前从未使用过jquery-mobile，但有些事情需要尝试 - 1）所有脚本都应该放在页面底部，就在关闭之前。 2）如果您要在下一行重新打开它，则无需关闭脚本标记。 3）这不会影响除整洁之外的任何事情，但你可以定义它们被启动的变量（即var A = document.getElementById（'timeA'）;）。

同样，不确定这些内容是否有助于解决您的具体问题，但至少可以让您的代码更好。

Answer 3

将timesaving功能

替换为以下内容

function timesaving(){
var  A  ;
var B ;
var C ;
var D ;
var E ;
A  = document.getElementById('timeA').value;
B = document.getElementById('timeB').value;
C = document.getElementById('timeC').value;
D = document.getElementById('timeD').value;
E = document.getElementById('timeE').value;


var raw = C * (E / 100);
var     loss = (E * raw) / 100;
var     tech = raw + loss;
var     rraw = tech * B;
var     tdum = rraw / C;

Atv = document.getElementById("timetvA")
Atv.innerHTML = A

cptm = document.getElementById("timetvCPTM")
cptm.innerHTML = raw
}

Answer 4

$('#timetvCPTM').text(A);

或

$('#timetvCPTM').append(A);

将var打印到DIV

jquerymobile HTML5将变量值放在div中

4 个答案:

更新了代码