Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!
Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.
Strony: 1
witam
chciałbym zrobic automatyczne przeliczanie ceny na stronie www miało by to wyglądać tak :
uzytkownik wybiera jakąś pozycje z kontrolo select ,z zaznaczona opcja była by mnozona np. * 10 a wynik byłby wyswietlany na tej samej stronie ,bez jej przeładowania
z JS nie mam pojecia jak sie za to zabrać :(
Offline
<div id="div1"> <select id="var1" onchange="document.getElementById('div2').appendChild(document.createTextNode(document.getElementById('var1').value*10)+" ");"> <option value="10">wartosc 10</option> <option value="20">wartosc 20</option> <option value="30">wartosc 30</option> </select> </div> <div id="div2"> tu wyswietli sie wartosc pomnozona przez 10 </div>
powinno dzialac :D
Ostatnio edytowany przez paoolo (2009-01-13 18:06:03)
Offline
niestety nie działa :( ,a mozna dopisać do Twojego kodu aby wynik był wpisywany w kontrolce input type=text ?
Offline
<div id="div1">
<select id="var1" onclick=wynik.value=(document.getElementById('var1').value*10);>
<option value="10">wartosc 10</option>
<option value="20">wartosc 20</option>
<option value="30">wartosc 30</option>
</select>
</div>
<br>
<input id="wynik" name="wynik" value="0.00" type="text">
działa :))
Offline
Jak działa to fajnie, ale pamiętaj żeby JavaScript podpinać dopiero po załadowaniu DOM i po stronie serwera przetwarzać ten formularz w ten sam sposób (summa summarum tzw. nieinwazyjność — strona bez JS ma być tak samo funkcjonalna jak z JS).
Poza tym jeżeli się nie mylę zadziała tylko u klikaczy myszką — jeżeli ktoś zmieni zaznaczoną opcję w liście rozwijanej z klawiatury, żadne zmiany na stronie się nie dokonają.
Niestety JavaScript nie oferuje prostego podpinania zdarzeń typu focus dla elementów listy rozwijanej. Dlatego musisz przy każdym zdarzeniu change listy rozwijanej sprawdzać która z opcji została zaznaczona (numer w tablicy uzyskasz dzięki form.select.selectedIndex, więc jego wartość otrzymasz przez form.select.options[form.select.selectedIndex].value) i następnie stosownie reagować.
Aa, bym zapomniał — dla nierozwijanych list wielokrotnego wyboru selectedIndex zwraca pozycję pierwszego zaznaczonego elementu. Dlatego w takich przypadkach konieczne jest przeiterowanie po elementach listy i sprawdzenie czy dana opcja nie otrzymała właściwości .selcted (a ma ją tylko i wyłącznie wtedy kiedy jest zaznaczona). Zresztą dla list jednokrotnego wyboru też można zastosować tę technikę, gdyż, jeżeli wierzyć moim źródłom, iterowanie nawet po dużych listach nie wpływa negatywnie na performance skryptu.
Ostatnio edytowany przez Minio (2009-01-13 19:42:12)
Offline
nic nie szkodzi udało mi sie dopisać nie działającą przez paloo funkcje aby wynik był wyswietlany w <div>
<div id="div2">
tu wyswietli sie wartosc pomnozona przez 10
</div>
tylko wynik jest dopistwany ,wiec tworzy sie cos takiego 10020023000400 (czyli doposuje kolejno ,nie usuwa starego wyniku mnozenia ),jak zrobic aby było tylko nadpisywana wartość ?
Offline
Musisz jawnie zadeklarować typ zmiennej jako numeryczny. Sprowadza się to do otoczenia odpowiedniego fragmentu kodu Number(/* Twój kod */).
Generalnie tego nauczył mnie JavaScript — zawsze deklaruj typ zmiennej. Chociaż inne, podobno patologiczne, języki zazwyczaj lepiej sobie radzą z interpretacją kontekstu i hermeneutyką.
Offline
<div id="div1"> <select id="var1" onchange="document.getElementById('div2').innerHTML='tu wyswietli sie wartosc pomnozona przez 10: '+document.getElementById('var1').value*10+' ';"> <option value="10">wartosc 10</option> <option value="20">wartosc 20</option> <option value="30">wartosc 30</option> </select> </div> <div id="div2"> tu wyswietli sie wartosc pomnozona przez 10: </div>
mozna jeszcze za pomoca ***.innerHTML, ale dla mnie jest nieco dziwne, wole operowac na DOM, zas takie stricte zastepowania jakiegos fragmentu tekstu nie opanowalem
Ostatnio edytowany przez paoolo (2009-01-13 20:08:01)
Offline
paoolo: metoda replace łańcucha znaków. Jako pierwszy argument przyjmuje wyrażenie regularne, co czyni ją dość potężną.
Offline
Minio napisał(-a):
paoolo: metoda replace łańcucha znaków. Jako pierwszy argument przyjmuje wyrażenie regularne, co czyni ją dość potężną.
nad tym nie myslalem, i widze ta sama strona z ktorej bralem niewielka czesc wiedzy
Offline
a jak zrobic aby w dwóch róznych miejscach strony pokazywało wynik ??
zrobienie 2 identycznych <div> o tym samym id nie działa :(
Offline
Skoro chcesz to mieć juz w dwóch miejscach, to w przyszłości możesz zapragnąć mieć w trzech. W takim wypadku najprościej napisać funkcję która jako argument przyjmowałaby element w którym ma się pojawić obliczona liczba. Gotowego rozwiązania nie podam, ponieważ nie jestem w stanie go stworzyć bez dokładnej znajomości struktury Twojej strony.
Oczywiście że zrobienie dwóch divów o tym samym ID nie działa. Specyfikacja jasno określa dlaczego. Jeżeli chcesz pewne działanie wykonać na kilku elementach, nadaj im odpowiednią klasę.
Niestety, żaden poziom DOM nie oferuje funkcji getElementsByClassName. Jest ona opisana w wersji roboczej HTML5 (ostrzegam, otworzenie strony może bardzo negatywnie wpłynąć na responsywność systemu), jak również dostarczana przez przeróżne biblioteki JS. Nie ma jednak potrzeby ładować przydużej biblioteki w celu uzyskania tej funkcjonalności, skoro analogiczną funkcję można sobie w prosty sposób napisać.
Warto zauważyć, że część udogodnień z HTML5 już jest obsługiwana przez nowoczesne przeglądarki, więc przed załadowaniem tej funkcji do pamięci należy sprawdzić czy przeglądarka jej nie oferuje.
Offline
Strony: 1