JavaScript-przeliczanie jednostek długości i wagi

pytanie zadane 16 stycznia 2019 w HTML i CSS przez kamilo2422 Nowicjusz (120 p.)

Witam

Potrzebuje pomocy z zadaniem, mianowicie aby utworzyć przelicznik jednostek miary i wagi.

Na przykład po wpisaniu w polu "Metry" wartości 1 w polu "Milimetry" wyświetli się wartość 1000.

Z góry dziękuje.

<html>
<head>
</head>
<body>

komentarz 16 stycznia 2019 przez lateM Pasjonat (17,660 p.)

Ok. To czego nie wiesz? Co już masz? ;)

3 odpowiedzi

odpowiedź 16 stycznia 2019 przez niezalogowany

Wrzuć kod to pogadamy i pomożemy ewentualnie, gotowca nie dostaniesz.

komentarz 16 stycznia 2019 przez kamilo2422 Nowicjusz (120 p.)

<!DOCTYPE html>

<html>
     <head>
	     <meta content="text/html; charset=UTF-8" />
		 <title>Przelicznik miar</title>
		 <script type="text/javascript">





	  </script>
	  </head>
	  <body>

 <h1>Przelicznik miar</h1>
 <b>Długości</b>
 <br>
 <br>
 <div class="miary-dlugosci">
  milimetr [mm]<input class="miary-dlugosci" onkeyup="licz(this)" id="miara1" base="0.001"><br>
  centymetr [cm]<input class="miary-dlugosci" onkeyup="licz(this)" id="miara2" base="0.01"><br>
  decymetr [dcm]<input class="miary-dlugosci" onkeyup="licz(this)" id="miara3" base="0.1"><br>
  metr [m] <input class="miary-dlugosci" onkeyup="licz(this)" id="miara4" base="1"><br>
  kilometr [km] <input class="miary-dlugosci" onkeyup="licz(this)" id="miara5" base="1000"><br>
</div>

<div class="form-group">
<b>Wagi</b>
<br>
<br>
miligram [mg] <input class="form-control" id="miara6" type="text" onkeyup="licz(this)" base="0.000001"><br>
gram [g] <input class="form-control" id="miara7" type="text" onkeyup="licz(this)" base="0.001"><br>
dekagram [dkg] <input class="form-control" id="miara8" type="text" onkeyup="licz(this)" base="0.01"><br>
kilogram [kg] <input class="form-control" id="miara9" type="text" onkeyup="licz(this)" base="1"><br>
tona [T] <input class="form-control" id="g9" type="miara10" onkeyup="licz(this)" base="1000"><br>
</div>


 </div>
 </div>
 </div>

komentarz 16 stycznia 2019 przez kamilo2422 Nowicjusz (120 p.)

Wiem brakuje funkcji.

Starałem się sugerować jakimś poradnikiem na Yt aczkolwiek żadna nie działa (var,let..itp)

komentarz 16 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Starałem się sugerować jakimś poradnikiem na Yt aczkolwiek żadna nie działa (var,let..itp)

to ja proponuję najpierw po prostu na spokonie pouczyć się podstaw JS i dopiero potem brać się za takie zadanka... bez podstaw nic nie zrobisz.

odpowiedź 17 stycznia 2019 przez niezalogowany

Ok. Kod wrzuciłeś. Popraw go trochę: uzupełnij znaczniki, wyrzuć zbędne </div>, zmień nazwę klasy <div class="miary-dlugosci">, bo trochę koliduje z klasami pól.

Teraz funkcja. Napisałam ją, ale zanim dostaniesz rozwiązanie, pokaż co umiesz. W skrócie:

1. Funkcja pobiera referencję do obiektu (pola input). OK

2. W funkcji ustawiasz zmienne:

- miara zawierającą klasę pola, na rzecz którego wywołujesz funkcję. Będzie to "miary-dlugosci" lub "form-control". Przy okazji popraw to nazewnictwo, aby było spójne.

- ile zawierającą wartość pobraną z pola

- podstawa zawierającą wartość atrybutu "base" pola. Przy okazji: warto zmienić wartości base na liczby całkowite, bo przy niektórych danych pojawia się np. 0.9999999.... zamiast 1, co jest związane z reprezentacją liczb przez JS. Daj najmniejszej jednostce base = "1", a dalszym odpowiednio większe.

3. Pobierasz kolekcję pól poprzez funkcję document.getElementsByClassName.

4. Teraz pętla po wszystkich elementach kolekcji, w której pobierasz wartość atrybutu "base" z danego pola, przeliczasz miary i wstawiasz wynik do pola.

Gotowe.

odpowiedź 20 stycznia 2019 przez niezalogowany

OK, masz "gotowca". Trochę przerobiłam plik HTML:

<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" />
	<title>Przelicznik miar</title>
	<script type="text/javascript" src="skrypt.js"></script>
</head>
<body>
<h1>Przelicznik miar</h1>
<b>Długości</b>
<br>
<br>
<div class="form-group">
	milimetr [mm]<input class="miary-dlugosci" onkeyup="licz(this)" id="miara1" base="1"><br>
	centymetr [cm]<input class="miary-dlugosci" onkeyup="licz(this)" id="miara2" base="10"><br>
	decymetr [dm]<input class="miary-dlugosci" onkeyup="licz(this)" id="miara3" base="100"><br>
	metr [m] <input class="miary-dlugosci" onkeyup="licz(this)" id="miara4" base="1000"><br>
	kilometr [km] <input class="miary-dlugosci" onkeyup="licz(this)" id="miara5" base="1000000"><br>
</div>
<div class="form-group">
<b>Wagi</b>
<br>
<br>
	miligram [mg] <input class="form-control" id="miara6" type="text" onkeyup="licz(this)" base="1"><br>
	gram [g] <input class="form-control" id="miara7" type="text" onkeyup="licz(this)" base="1000"><br>
	dekagram [dg] <input class="form-control" id="miara8" type="text" onkeyup="licz(this)" base="10000"><br>
	kilogram [kg] <input class="form-control" id="miara9" type="text" onkeyup="licz(this)" base="1000000"><br>
	tona [T] <input class="form-control" id="g9" type="miara10" onkeyup="licz(this)" base="1000000000"><br>
</div>

</body>
</html>

A tu skrypt:

function licz(pole) {
	let miara = pole.className;
	let ile = pole.value;
	let podstawa = parseInt(pole.getAttribute("base"));
	
	let rodzaj = document.getElementsByClassName(miara);
	for(let k=0; k<rodzaj.length; k++) {
		let przelicznik = rodzaj[k].getAttribute("base");
		rodzaj[k].value = ile*podstawa/przelicznik;
	}
}