. . .
if( isNaN( p ) || isNaN( d ) )
out.innerHTML = "Dystans i ilo ć paliwa musz być liczbami!";ś ą else
{
if( d != 0 ) {
var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );
var kilometr = ( wynik / 100 ) * 5.03 ; wynik = wynik.toFixed( 2 );
kilometr = kilometr.toFixed( 2 );
out.innerHTML = "Spalanie: " + wynik + " l/100km<\/br>";
out.innerHTML += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł";
} else
out.innerHTML = "Dystans nie moze byc zerowy!";
}
. . . . . .
if( isNaN( p ) || isNaN( d ) )
out.innerHTML = "Dystans i ilo ć paliwa musz być liczbami!";ś ą else
{
if( d != 0 ) {
var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );
var kilometr = ( wynik / 100 ) * 5.03 ; wynik = wynik.toFixed( 2 );
kilometr = kilometr.toFixed( 2 );
out.innerHTML = "Spalanie: " + wynik + " l/100km<\/br>";
out.innerHTML += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł";
} else
out.innerHTML = "Dystans nie moze byc zerowy!";
}
. . .
<body>
<h2>Obliczanie redniego spalania na 100 km</h2>ś
<p>Paliwo : <input type="text" id="p" /> [litry]</p>
<p>Dystans: <input type="text" id="d" /> [kilometry]</p>
<p>
<input type="radio" id="r_on" name="paliwo" value="on" />olej nap dowyę
<input type="radio" id="r_et" name="paliwo" value="et" checked="checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="lpg" />gaz
</p>
<input type="button" value="Oblicz" onclick="spalanie()"/>
<input type="button" value="Wyczy ć" onclick="czyszczenie()"/>ś <p id="w"></p>
</body
<body>
<h2>Obliczanie redniego spalania na 100 km</h2>ś
<p>Paliwo : <input type="text" id="p" /> [litry]</p>
<p>Dystans: <input type="text" id="d" /> [kilometry]</p>
<p>
<input type="radio" id="r_on" name="paliwo" value="on" />olej nap dowyę
<input type="radio" id="r_et" name="paliwo" value="et" checked="checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="lpg" />gaz
</p>
<input type="button" value="Oblicz" onclick="spalanie()"/>
<input type="button" value="Wyczy ć" onclick="czyszczenie()"/>ś <p id="w"></p>
</body
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Wprowadzamy wybór rodzaju paliwa (olej napędowy, benzyna, gaz)
Ten przycisk będzie domyślnie zaznaczony.
Uwaga, są kontrowersje związane z wartością przypisywaną do atrybutu checked, przedstawione rozwiązanie jest zgodne z W3C.
W ramach grupy przycisków o tej samej wartości atrybutu name tylko jeden przycisk może być zaznaczony. Pozwala to na stosowanie wielu różnych grup przycisków radiowych.
Ten przycisk będzie domyślnie zaznaczony.
Uwaga, są kontrowersje związane z wartością przypisywaną do atrybutu checked, przedstawione rozwiązanie jest zgodne z W3C.
W ramach grupy przycisków o tej samej wartości atrybutu name tylko jeden przycisk może
być zaznaczony. Pozwala to na stosowanie wielu różnych grup przycisków radiowych.
function czyszczenie() {
document.getElementById( "p" ).value = "";
document.getElementById( "d" ).value = "";
document.getElementById( "w" ).innerHTML = "";
document.getElementById( "r_on" ).checked = false;
document.getElementById( "r_et" ).checked = true;
document.getElementById( "r_lpg" ).checked = false;
}
function czyszczenie() {
document.getElementById( "p" ).value = "";
document.getElementById( "d" ).value = "";
document.getElementById( "w" ).innerHTML = "";
document.getElementById( "r_on" ).checked = false;
document.getElementById( "r_et" ).checked = true;
document.getElementById( "r_lpg" ).checked = false;
}
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Poprawka funkcji czyszczenia pól wprowadzania danych
Dla elementów wejściowych typu radio i checkbox DOM przewiduje
możliwość manipulowania właściwością checked, traktowaną jako wartość bool.
Dla elementów wejściowych typu radio i checkbox DOM przewiduje
możliwość manipulowania właściwością checked, traktowaną jako wartość bool.
Inne właściwości obiektu typu przycisk radiowy (wg W3C):
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Poprawka funkcji obliczania średniego spalania:
. . .
if( isNaN( p ) || isNaN( d ) )
out.innerHTML = "Dystans i ilo ć paliwa musz być liczbami!";ś ą else
{
if( d != 0 ) {
var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );
var kilometr = ( wynik / 100 ) * ustalCene() ; wynik = wynik.toFixed( 2 );
kilometr = kilometr.toFixed( 2 );
out.innerHTML = "Spalanie: " + wynik + " l/100km<\/br>";
out.innerHTML += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł";
} else
out.innerHTML = "Dystans nie moze byc zerowy!";
}
. . . . . .
if( isNaN( p ) || isNaN( d ) )
out.innerHTML = "Dystans i ilo ć paliwa musz być liczbami!";ś ą else
{
if( d != 0 ) {
var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );
var kilometr = ( wynik / 100 ) * ustalCene() ; wynik = wynik.toFixed( 2 );
kilometr = kilometr.toFixed( 2 );
out.innerHTML = "Spalanie: " + wynik + " l/100km<\/br>";
out.innerHTML += "Szacunkowy koszt przejazdu 1km to: " + kilometr + "zł";
} else
out.innerHTML = "Dystans nie moze byc zerowy!";
}
. . .
Wywołanie funkcji odpowiedzialnej za
wyznaczenie ceny właściwej dla danego paliwa Wywołanie funkcji odpowiedzialnej za
wyznaczenie ceny właściwej dla danego paliwa
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Funkcja wyznaczania ceny, badziewiarskie wersje w amatorskiej odsłonie:
function ustalCene() {
if( document.getElementById( "r_on" ).checked ) return 4.50;
if( document.getElementById( "r_et" ).checked ) return 4.60;
if( document.getElementById( "r_lpg" ).checked ) return 2.50;
}
function ustalCene() {
if( document.getElementById( "r_on" ).checked ) return 4.50;
if( document.getElementById( "r_et" ).checked ) return 4.60;
if( document.getElementById( "r_lpg" ).checked ) return 2.50;
}
function ustalCene() {
var on = document.getElementById( "r_on" );
var et = document.getElementById( "r_et" );
var lpg = document.getElementById( "r_lpg" );
if( on.checked ) return 4.50;
if( et.checked ) return 4.60;
if( lpg.checked ) return 2.50;
function ustalCene() {
var on = document.getElementById( "r_on" );
var et = document.getElementById( "r_et" );
var lpg = document.getElementById( "r_lpg" );
if( on.checked ) return 4.50;
if( et.checked ) return 4.60;
if( lpg.checked ) return 2.50;
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Poprawiamy interfejs i przypisujemy ceny do przycisków radiowych:
. . .
<h2>Obliczanie redniego spalania na 100 km</h2>ś
<p>Paliwo : <input type="text" id="p" /> [litry]</p>
<p>Dystans: <input type="text" id="d" /> [kilometry]</p>
<form name="wybieraczPaliwa">
<input type="radio" id="r_on" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz
</form>
<input type="button" value="Oblicz" onclick="spalanie()"/>
<input type="button" value="Wyczy ć" onclick="czyszczenie()"/>ś
<p id="w"></p>
. . . . . .
<h2>Obliczanie redniego spalania na 100 km</h2>ś
<p>Paliwo : <input type="text" id="p" /> [litry]</p>
<p>Dystans: <input type="text" id="d" /> [kilometry]</p>
<form name="wybieraczPaliwa">
<input type="radio" id="r_on" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz
</form>
<input type="button" value="Oblicz" onclick="spalanie()"/>
<input type="button" value="Wyczy ć" onclick="czyszczenie()"/>ś
<p id="w"></p>
. . .
Formularz o nazwie wybieraczPaliwa Formularz o nazwie wybieraczPaliwa
Cena jako wartość zapisane w obiekcie przycisku radiowego
Cena jako wartość zapisane w obiekcie
przycisku radiowego
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Funkcja wyznaczania ceny, dalej badziew, ale w nieamatorskiej odsłonie:
function ustalCene() {
for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) if( document.wybieraczPaliwa.paliwo[ i ].checked )
return Number( document.wybieraczPaliwa.paliwo[ i ].value );
}
function ustalCene() {
for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) if( document.wybieraczPaliwa.paliwo[ i ].checked )
return Number( document.wybieraczPaliwa.paliwo[ i ].value );
}
Dla elementów formularza o tych samych nazwa tworzona jest tablica odpowiadających im obiektów:
document.wybieraczPaliwa.paliwo // Dla formularza o nazwie wybieraczPaliwa document.wybieraczPaliwa.paliwo // Dla formularza o nazwie wybieraczPaliwa
Liczba elementów w takiej tablicy:
document.wybieraczPaliwa.paliwo.length document.wybieraczPaliwa.paliwo.length
Liczba elementów w takiej tablicy:
document.wybieraczPaliwa.paliwo.length document.wybieraczPaliwa.paliwo.length
Dostęp do i-tego elementu tablicy:
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Czasem inikatowa identyfikacja elementów nie jest konieczna:
function czyszczenie() {
document.getElementById( "p" ).value = "";
document.getElementById( "d" ).value = "";
document.getElementById( "w" ).innerHTML = "";
for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) document.wybieraczPaliwa.paliwo[ i ].checked = false;
document.wybieraczPaliwa.paliwo[ 1 ].checked = true;
}
function czyszczenie() {
document.getElementById( "p" ).value = "";
document.getElementById( "d" ).value = "";
document.getElementById( "w" ).innerHTML = "";
for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) document.wybieraczPaliwa.paliwo[ i ].checked = false;
document.wybieraczPaliwa.paliwo[ 1 ].checked = true;
}
function czyszczenie() {
document.getElementById( "p" ).value = "";
document.getElementById( "d" ).value = "";
document.getElementById( "w" ).innerHTML = "";
document.getElementById( "r_on" ).checked = false;
document.getElementById( "r_et" ).checked = true;
document.getElementById( "r_lpg" ).checked = false;
}
function czyszczenie() {
document.getElementById( "p" ).value = "";
document.getElementById( "d" ).value = "";
document.getElementById( "w" ).innerHTML = "";
document.getElementById( "r_on" ).checked = false;
document.getElementById( "r_et" ).checked = true;
document.getElementById( "r_lpg" ).checked = false;
}
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
Wtedy można zrezygnować z stosowania id:
. . .
<form name="wybieraczPaliwa">
<input type="radio" id="r_on" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz
</form>
. . . . . .
<form name="wybieraczPaliwa">
<input type="radio" id="r_on" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" id="r_et" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" id="r_lpg" name="paliwo" value="2.50" />gaz
</form>
. . .
. . .
<form name="wybieraczPaliwa">
<input type="radio" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz
</form>
. . . . . .
<form name="wybieraczPaliwa">
<input type="radio" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz
</form>
. . .
Dlaczego ta funkcja jest dalej badziewiasta?
Rozwojowy element — koszt przejechania jednego kilometra Rozwojowy element — koszt przejechania jednego kilometra
function ustalCene() {
for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) if( document.wybieraczPaliwa.paliwo[ i ].checked )
return Number( document.wybieraczPaliwa.paliwo[ i ].value );
}
function ustalCene() {
for( i = 0; i < document.wybieraczPaliwa.paliwo.length; ++i ) if( document.wybieraczPaliwa.paliwo[ i ].checked )
return Number( document.wybieraczPaliwa.paliwo[ i ].value );
}
Dlatego, że ceny paliw są i tak na stałe wpisane w kod:
. . .
<form name="wybieraczPaliwa">
<input type="radio" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz
</form>
. . . . . .
<form name="wybieraczPaliwa">
<input type="radio" name="paliwo" value="4.50" />olej nap dowyę
<input type="radio" name="paliwo" value="4.60" checked = "checked" />benzyna <input type="radio" name="paliwo" value="2.50" />gaz
</form>
. . .