Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][JavaScript]Liczenie w czasie rzeczywistym z input'a
BienuSS
post 18.03.2018, 15:42:39
Post #1





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Witam.
W jaki sposób moge zrobić żeby liczba wpisywana w inpucie była w czasie rzeczywistym mnożona przez daną liczbe i wynik z działania zmieniający się w divie
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 17:03:37
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Na przykład tak:

[JAVASCRIPT] pobierz, plaintext 
  1. document.getElementById('id-twojego-inputa').addEventListener('input', e => {
  2.     document.getElementById('id-twojego-diva').innerHTML = e.target.value * 123;
  3. });
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 17:54:56
Post #3





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Niestety nie działa
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 17:59:10
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Wstawiłeś skrypt na końcu? Pokaż cały HTML.
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 18:14:28
Post #5





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

OK, działa ja musze mieć coś w html zepsute bo wrzuciłem to do jsfiddle i działa, Dzięki!

Natomiast u mnie w pliku nie działa, mam cos takiego:
Kod
<html>
<head>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>



<input type="text" id="loo">
<div id="elo">Total</div>

<script type="javascript/text">
    document.getElementById('loo').addEventListener('input', e => {
    document.getElementById('elo').innerHTML = e.target.value * 123;
});
</script>
</body>
</html>


EDIT:
mój błąd zamiast:
Kod
<script type="javascript/text">
    document.getElementById('loo').addEventListener('input', e => {
    document.getElementById('elo').innerHTML = e.target.value * 123;
});
</script>


trzeba dać

Kod
<script>
    document.getElementById('loo').addEventListener('input', e => {
    document.getElementById('elo').innerHTML = e.target.value * 123;
});
</script>


Ten post edytował BienuSS 18.03.2018, 18:19:48
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 18:26:08
Post #6





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Type to jak już text/javascript, a nie javascript/text smile.gif Ale możesz śmiało pominąć ten atrybut.
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 18:40:39
Post #7





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

A w przypadku gdy mam kilka takich formularzy tj.:
[HTML] pobierz, plaintext 
  1. <input type="text" class="value_coins">
  2. <div class="elo">Total</div><br>
  3. <input type="text" class="value_coins">
  4. <div class="elo">Total</div>
[HTML] pobierz, plaintext


to bawić się funkcją closest() ?

Ten post edytował BienuSS 18.03.2018, 18:43:06
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 18:52:19
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Masz mnóstwo możliwości. Ja bym poszedł albo we wspólnego rodzica, albo w coś bardziej elastycznego:

[HTML] pobierz, plaintext 
  1. <input type="text" data-binding="foo">
  2. <div id="foo"></div>
  3.  
  4. <input type="text" data-binding="bar">
  5. <div id="bar"></div>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. document.querySelectorAll('[data-binding]').forEach(input => {
  2.     input.addEventListener('input', event => {
  3.         document.getElementById(event.target.dataset.binding).innerHTML = event.target.value;
  4.     });
  5. });
[JAVASCRIPT] pobierz, plaintext


To oczywiście wszystko w waniliowym JavaScripcie, jak chcesz to zrób sobie w jQuery, ale w dzisiejszych czasach warto rozważyć rezygnację z jQuery.
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 20:53:27
Post #9





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Mam coś takiego:
[HTML] pobierz, plaintext 
  1. <div>
  2.   <input type="text" data-binding="foo">
  3.   <div id="foo"></div>
  4.   <span>2.5</span>
  5. </div>
[HTML] pobierz, plaintext


a tu js

Kod
document.querySelectorAll('[data-binding]').forEach(input => {

    input.addEventListener('input', event => {
        document.getElementById(event.target.dataset.binding).innerHTML = "<b>Razem: "+Math.round((event.target.value*xxxxxxx))+"</b>";
    });
});


https://jsfiddle.net/u4fz0vhb/34/

i zamiast xxxxxx potrzebuje wstawić wartość z spana, próbowałem closest(), getElementByiD, i jak narazie 0 pomysłów, jak by ktoś dał rade podać mi polecenie do którego powinienem sie odwołać, nie chce gotowego kodu, a pomysłu jak by to zrobić, z góry dzięki!

Ten post edytował BienuSS 18.03.2018, 21:11:38
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 21:23:33
Post #10





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Czy takie zachowanie z mnożeniem będzie występowało wiele razy na stronie? Pytam, bo zastanawiam się czy warto tak starać się robić elegancki HTML czy może lepiej robić osobne callbacki.
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 21:29:46
Post #11





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Na stronie jesli uzytkownik bedzie chciał wpisać w kazde pole coś to koło 100 razy
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 21:42:11
Post #12





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

A opisz dokładniej ten projekt, co dokładnie to ma robić?
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 21:50:54
Post #13





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Użytkownik wpisuje jakąś cyfre w inpucie, ona jest mnożona przez zmienną pobraną z bazydanych i wyświetlana w divie pod inputem w którym wpisywaliśmy cyfrę
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 21:52:55
Post #14





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Każdy input ma ten mnożnik obok?
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 21:54:54
Post #15





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

tak ale jest ukryty teraz dałem to tak:
[HTML] pobierz, plaintext 
  1.  
  2. <div>
  3.   <input type="text" data-binding="bar">
  4.   <div id="bar"></div>
  5.   <input type='hidden' id='bar-mnoznik' value="$zmienna" />
  6. </div>
  7.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 22:09:28
Post #16





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Musiałbyś dużo konkretniej opowiedzieć co robisz, żebym Ci doradził jakieś fajne rozwiązanie. Nie wiem czy ten mnożnik gdzieś zapisujesz czy nie. Opowiedz po prostu szczegółowo o projekcie. Nie mów mi o divach i inputach, tylko jak chłop krowie na rowie - co to jest i co ma robić.
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 22:18:50
Post #17





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Jest to jakby demo obstawiania meczy, uzytkownik dostaje na start 100000 punktów i moze nimi obstawiac, kursy są tworzone tak że pobieraz sie z bazydanych ilosc punktów na druzyne a, drużyne b i zapisuje sie do zmiennej. Użytkownik wpisuje ile chce postawic coinsów na daną drużyne i mnoży mu razy dany kurs
Go to the top of the page
+Quote Post
SmokAnalog
post 18.03.2018, 22:27:02
Post #18





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

To może lepiej zapisuj mnożnik bezpośrednio w inpucie i po wspólnym rodzicu szukaj odpowiedniego diva? Nie ma sensu w takim razie ten mój pomysł z data-bind, bo musiałbyś na siłę nadawać nazwy. Lepiej coś na kształt:

[HTML] pobierz, plaintext 
  1. <div>
  2.     <input type="text" data-multiplier="2.5">
  3.     <div class="bar"></div>
  4. </div>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. document.querySelectorAll('[data-multiplier]').forEach(input => {
  2.     input.addEventListener('input', event => {
  3.         event.target.parentNode.querySelector('.bar').innerHTML = event.target.value * event.target.dataset.multiplier;
  4.     });
  5. });
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
BienuSS
post 18.03.2018, 22:36:04
Post #19





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----

Dziękuje exclamation.gif Dokładnie o to chodziło
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 06:05
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn