Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JQuery - wyświetlanie w polu tekstowym wybranej wartości
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
leewang
21.11.2012, 19:50:23
Witam

Mam problem z wyświetlaniem w okienku wybranej wartości.

Możecie podpowiedzieć jak to zrobić?

Mam taki kod html:

[HTML] pobierz, plaintext 
  1.  <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.         <title>
  7.         </title>
  8.         <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  9.         <link rel="stylesheet" href="my.css" />
  10. 		<script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
  11.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  12.         <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  13.  
  14.     </head>
  15.     <body>
  16.         <!-- Home -->
  17.  
  18.         <div id='calculator' data-role="page" >
  19.             <div data-theme="a" data-role="header">
  20.                 <h3>
  21.                     Kalkulator
  22.                 </h3>
  23.             </div>
  24.             <div data-role="content">
  25.                 <div data-role="fieldcontain">
  26.                   <input type="text" style="text-align: right;" value="0" id="display" name="display"/> 
  27.                 </div>
  28.  
  29.  
  30. 				 <a data-role="button" data-inline="true" href="#" class='digits'>1</a>
  31. 				 <a data-role="button" data-inline="true" href="#" class='digits'>2</a>
  32. 				 <a data-role="button" data-inline="true" href="#" class='digits'>3</a>
  33. 			     <a data-role="button" data-inline="true" href="#" class='digits'>4</a>
  34. 			     <a data-role="button" data-inline="true" href="#" class='digits'>5</a>
  35. 				 <a data-role="button" data-inline="true" href="#" class='digits'>6</a>
  36. 				 <a data-role="button" data-inline="true" href="#" class='digits'>7</a>
  37. 				 <a data-role="button" data-inline="true" href="#" class='digits'>8</a>
  38. 				 <a data-role="button" data-inline="true" href="#" class='digits'>9</a>
  39. 				 <a data-role="button" data-inline="true" href="#" class='digits'>0</a>
  40.  
  41. 				 <a data-role="button" data-inline="true" href="#" class='operations'>+</a>
  42. 				 <a data-role="button" data-inline="true" href="#" class='operations'>-</a>
  43. 				 <a data-role="button" data-inline="true" href="#" class='operations'>*</a>
  44. 				 <a data-role="button" data-inline="true" href="#" class='operations'>/</a>
  45. 				 <a data-role="button" data-inline="true" href="#" class='operations'>=</a>
  46.  
  47.  
  48.             </div>
  49.         </div>
  50.        <script>
  51. 	   </script>
  52.     </body>
[HTML] pobierz, plaintext


Chciałbym wyświetlić w polu o nazwie display wartość którą przycisnę buttonem.

Jak mogę to zrealizować? Później będę dopisywał sobie funkcje które liczą itd, ale na razie nie wiem jak pokazać to co przycisnę w polu display?

Pozdrawiam
nospor
21.11.2012, 19:53:30
Nie w okienku, a w polu tekstowym.... Siedziałem 5 minut i sie zastanawiałem gdzie ty masz to okienko...

Kod
<a data-role="button" data-inline="true" href="#" onclick="jQuery('#display').val('1');return false;" class='digits'>1</a>

Analogicznie reszta
leewang
21.11.2012, 19:59:48
Dzięki, o to mi chodziło wink.gif

Mam teraz drugi problem z pobraniem zmiennych, może ktoś wpadnie na pomysł jak to zrobić?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>
  7. </title>
  8. <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  9. <link rel="stylesheet" href="my.css" />
  10. <style>
  11. /* App custom styles */
  12. </style>
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
  14. </script>
  15. <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
  16. </script>
  17. <script src="my.js">
  18. </script>
  19. </head>
  20. <body>
  21. <!-- Home -->
  22. <div data-role="page" id="page1">
  23. <div data-theme="a" data-role="header">
  24. <h3>
  25. Kalkulator
  26. </h3>
  27. </div>
  28. <div data-role="content">
  29. <div data-role="fieldcontain">
  30. <fieldset data-role="controlgroup">
  31. <label for="wyswietlacz">
  32. </label>
  33. <textarea name="wyswietlacz" id="wyswietlacz" placeholder="">
  34. </textarea>
  35. </fieldset>
  36. </div>
  37. <div class="ui-grid-d">
  38. <div class="ui-block-a">
  39. <button data-role="button" data-theme="e" href="#page1">
  40. 1
  41. </button>
  42. </div>
  43. <div class="ui-block-b">
  44. <button data-role="button" data-theme="e" href="#page1">
  45. 2
  46. </button>
  47. </div>
  48. <div class="ui-block-c">
  49. <button data-role="button" data-theme="e" href="#page1">
  50. 3
  51. </button>
  52. </div>
  53. <div class="ui-block-d">
  54. <button data-role="button" data-theme="a" href="#page1">
  55. +
  56. </button>
  57. </div>
  58. <div class="ui-block-e">
  59. <button data-role="button" data-theme="a" href="#page1">
  60. -
  61. </button>
  62. </div>
  63. <div class="ui-block-a">
  64. <button data-role="button" data-theme="e" href="#page1">
  65. 4
  66. </button>
  67. </div>
  68. <div class="ui-block-b">
  69. <button data-role="button" data-theme="e" href="#page1">
  70. 5
  71. </button>
  72. </div>
  73. <div class="ui-block-c">
  74. <button data-role="button" data-theme="e" href="#page1">
  75. 6
  76. </button>
  77. </div>
  78. <div class="ui-block-d">
  79. <button data-role="button" data-theme="a" href="#page1">
  80. *
  81. </button>
  82. </div>
  83. <div class="ui-block-e">
  84. <button data-role="button" data-theme="a" href="#page1">
  85. /
  86. </button>
  87. </div>
  88. <div class="ui-block-a">
  89. <button data-role="button" data-theme="e" href="#page1">
  90. 7
  91. </button>
  92. </div>
  93. <div class="ui-block-b">
  94. <button data-role="button" data-theme="e" href="#page1">
  95. 8
  96. </button>
  97. </div>
  98. <div class="ui-block-c">
  99. <button data-role="button" data-theme="e" href="#page1">
  100. 9
  101. </button>
  102. </div>
  103. <div class="ui-block-d">
  104. <button data-role="button" data-theme="a" href="#page1">
  105. ^
  106. </button>
  107. </div>
  108. <div class="ui-block-e">
  109. <button data-role="button" data-theme="a" href="#page1">
  110. p
  111. </button>
  112. </div>
  113. <div class="ui-block-a">
  114. <button data-role="button" data-theme="a" href="#page1">
  115. C
  116. </button>
  117. </div>
  118. <div class="ui-block-b">
  119. <button data-role="button" data-theme="e" href="#page1">
  120. 0
  121. </button>
  122. </div>
  123. <div class="ui-block-c">
  124. <button data-role="button" data-theme="a" href="#page1">
  125. =
  126. </button>
  127. </div>
  128. <div class="ui-block-d">
  129. </div>
  130. <div class="ui-block-e">
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <script>
  136.  
  137. var PoleWyswietlacza;
  138.  
  139. $(document).ready(function() {
  140. PoleWyswietlacza = $('#wyswietlacz');
  141. $("button").bind('tap', function() {
  142. przyciskNacisniety();
  143. })
  144. })
  145.  
  146. function przyciskNacisniety() {
  147.  
  148.  
  149. var przycisk = event.target.innerText;
  150.  
  151. if (przycisk=='=') {
  152. oblicz();
  153. } else if(przycisk=='+')
  154. {
  155. dodaj();
  156.  
  157.  
  158.  
  159. }
  160. else if(przycisk=='C')
  161. {
  162. wyczysc();
  163. }else
  164. wyswietlacz(przycisk);
  165. }
  166.  
  167. function dodaj(){
  168. var zmienna1=PoleWyswietlacza.val();
  169. var zmienna2;
  170. alert(zmienna1 +" Zmienna2: "+ zmienna2);
  171.  
  172. }
  173.  
  174.  
  175.  
  176. function wyswietlacz(przycisk) {
  177. var nowyWyswietlacz = PoleWyswietlacza.val() + przycisk;
  178. PoleWyswietlacza.val(nowyWyswietlacz)
  179. }
  180.  
  181. function oblicz() {
  182. try {
  183. var nowyWyswietlacz = eval(PoleWyswietlacza.val());
  184. PoleWyswietlacza.val(nowyWyswietlacz);
  185. } catch (error) {
  186. PoleWyswietlacza.val("Error")
  187. }
  188. }
  189.  
  190. function wyczysc(){
  191.  
  192. PoleWyswietlacza.val('');
  193.  
  194. }
  195.  
  196. </script>
  197. </body>
  198. </html>
[HTML] pobierz, plaintext


Kod
//Tutaj ma się pokazywać na wyświetlaczu to co zostało naciśnięte
$(document).ready(function() {
PoleWyswietlacza = $('#wyswietlacz');
$("button").bind('tap', function() {
przyciskNacisniety();
})
})

//Tutaj pokazuje się na wyświetlaczu to co kilka razy było naciśnięte np nacisnę dwa razy 5 to pokaze się 55 a nie sama 5.
function wyswietlacz(przycisk) {
var nowyWyswietlacz = PoleWyswietlacza.val() + przycisk;
PoleWyswietlacza.val(nowyWyswietlacz)
}

//Tutaj chciałem wprowadzić obsługę przycisków funkcyjnych tzn jak nacisnę + to że ma się dodawać, jak nacisnę = to ma być wynik itd tylko nie wiem jak to zrealizować

function przyciskNacisniety() {

var przycisk = event.target.innerText;

if (przycisk=='=') {
oblicz();
} else if(przycisk=='+')
{
// tutaj mam problem z pobraniem zmiennych
}
else if(przycisk=='C')
{
wyczysc();
}else
wyswietlacz(przycisk);
}


//To jest źle
function dodaj(){
var zmienna1=PoleWyswietlacza.val();
var zmienna2;
alert(zmienna1 +" Zmienna2: "+ zmienna2);

}

//Tutaj funkcja czyszcząca ekran:

function wyczysc(){

PoleWyswietlacza.val('');

}


Opisałem jak mogłem, chodzi mi o to jak pobrać drugą zmienną po kliknięciu przycisku + ?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.