Witam.
Ostatnio miałem problem ze stworzeniem walidacji do swoich funkcji obliczających obwód, pole i objętość prostopadłościanu. Udało mi się to zrobić dzięki kilku przykładom na internecie którymi się zasugerowałem. Niestety takie podstawianie innego kodu do swojego poskutkowało tym że nie rozumiem za bardzo jak działa zmienna "sprawdzanie" która sprawdza czy warunek jest true czy false:
<body style="background: #f8f3e6;">
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
</head>
<body style="background: #f8f3e6;">
<h2> Obliczanie pola, obwodu i objętości prostopadłościanu</h2>
<form name="przeliczanie">
<img src="prostopadloscian.gif" alt="prostopadłościan" />
<br />
Podaj a: <input type="text" name="a" /><br />
Podaj b: <input type="text" name="b" /><br />
Podaj H: <input type="text" name="H" /><br />
<br />
Oblicz: <br />
<button id="obw"> OBWÓD </button> <button id="pole"> POLE </button> <button id="obj"> OBJĘTOŚC </button>
</form>
<div id="wynik"></div>
<script type="text/javascript">
var a = document.przeliczanie.a;
var b = document.przeliczanie.b;
var H = document.przeliczanie.H;
var o = document.getElementById("obw");
var p = document.getElementById("pole");
var v = document.getElementById("obj");
var sprawdzenie = false;
function obwod(a, b, H) {
var obw;
var d = Number(a.value);
var f = Number(b.value);
var e = Number(H.value);
return obw = 4 * d + 4 * f + 4 * e;
}
function pole(x, y, z) {
var pole;
var d = Number(x.value);
var f = Number(y.value);
var e = Number(z.value);
return pole = 2 * d * f + 2 * f * e + 2 * d * e;
}
function obj(x, y, z) {
var obj;
var d = Number(x.value);
var f = Number(y.value);
var e = Number(z.value);
return obj = d * e * f;
}
function licz_obwod() {
if (sprawdzenie == true) {
Sprawdz_ponownie();
if (sprawdzenie == true) {
document.getElementById("wynik").innerHTML = "<br>Obwód prostopadłościanu jest równy: " + obwod(a,b,H);
return false;
}
else {
Sprawdz_ponownie();
return false
}
}
else {
Sprawdz_ponownie();
return false
}
}
function licz_pole() {
if (sprawdzenie == true) {
Sprawdz_ponownie();
if (sprawdzenie == true) {
document.getElementById("wynik").innerHTML = "<br>Pole prostopadłościanu jest równe: " + pole(a, b, H);
return false;
}
else {
Sprawdz_ponownie();
return false
}
}
else {
Sprawdz_ponownie();
return false
}
}
function licz_objetosc() {
if (sprawdzenie == true) {
Sprawdz_ponownie();
if (sprawdzenie == true) {
document.getElementById("wynik").innerHTML = "<br>Objętość prostopadłościanu jest równa: " + obj(a, b, H);
return false;
}
else {
return false
}
}
else {
Sprawdz_ponownie();
return false
}
}
function Sprawdz()
{
if (isNaN(this.value))
{
alert("Wprowadź daną liczbową!");
sprawdzenie = false;
return false;
}
else if (this.value < 0)
{
alert("Podana przez Ciebie liczba jest mniejsza od zera! Podaj większą wartość!");
sprawdzenie = false;
return false;
}
else if (this.value == 0) {
alert("Podana przez Ciebie liczba jest równa 0! Podaj większą wartość!");
sprawdzenie = false;
return false;
}
else {
sprawdzenie = true;
return false;
};
}
function Sprawdz_ponownie() {
if (isNaN(a.value) || isNaN(b.value) || isNaN(H.value)) {
alert("Wprowadź daną liczbową!");
sprawdzenie = false;
return false;
}
else if (a.value < 0 || b.value < 0 || H.value < 0) {
alert("Podana przez Ciebie liczba jest mniejsza od zera! Podaj większą wartość!");
sprawdzenie = false;
return false;
}
else if (a.value == 0 || b.value == 0 || H.value == 0) {
alert("Zanim obliczysz, uzupełnij wszystkie pola!");
sprawdzenie = false;
return false;
}
else {
sprawdzenie = true;
return false;
};
}
o.onclick = licz_obwod;
p.onclick = licz_pole;
v.onclick = licz_objetosc;
a.onblur = Sprawdz;
b.onblur = Sprawdz;
H.onblur = Sprawdz;
</script>
</body>
</html>
Mam kilka pytań odnośnie jak to działa i dlaczego tak:
1. Kiedy wystąpi wartość true? W ifie wpisałem tylko (sprawdzanie == true) ale kiedy to się stanie? Gdzie to jest określone, dla jakich wartości przyjmuje false (to jestem jeszcze w stanie się domyślić nie wiem czy słusznie) a dla jakich true?
2. Do czego służy ostatnia linijka w funkcji Sprawdz i Sprawdz_ponownie, mianowicie:
else {
sprawdzenie = true;
return false;
};
3. Ostatnie pytanie, dlaczego po zastosowaniu kodu poniżej (ten sam program z innym sposobem zabezpieczenia danych) po jednokrotnym kliknięciu przycisku obliczania np. OBWODU, i wystąpienia błędu (w alercie), a następnie kolejnym kliknięciu przycisku obliczania OBWODU wypisuje już:
Wynik: NaN
A nie kolejnego alerta?
Podaje drugi kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Sprawdzian</title>
</head>
<body style="background: #f8f3e6;">
<h2> Obliczanie pola, obwodu i objętości prostopadłościanu</h2>
<form name="przeliczanie">
<img src="prostopadloscian.gif" alt="prostopadłościan" />
<br />
Podaj a: <input type="text" name="licz1" id="a" onblur="Sprawdzenie(this.value)" /><br />
Podaj b: <input type="text" name="licz2" id="b" onblur="Sprawdzenie(this.value)" /><br />
Podaj H: <input type="text" name="licz3" id="H" onblur="Sprawdzenie(this.value)" /><br />
<br />
Oblicz: <br />
<button id="obw"> OBWÓD </button> <button id="pole"> POLE </button> <button id="obj"> OBJĘTOŚC </button>
</form>
<div id="wynik"></div>
<script type="text/javascript">
function obwod() {
var x1 = Number(document.getElementById('a').value);
var x2 = Number(document.getElementById('b').value);
var x3 = Number(document.getElementById('H').value);
var obw = 4 * x1 + 4 * x2 + 4 * x3;
document.getElementById('wynik').innerHTML = "Wynik: " + obw;
return false;
}
function pole() {
var x1 = Number(document.getElementById('a').value);
var x2 = Number(document.getElementById('b').value);
var x3 = Number(document.getElementById('H').value);
var pole = 2 * x1 * x2 + 2 * x2 * x3 + 2 * x1 * x3;
document.getElementById('wynik').innerHTML = "Wynik: " + pole;
return false;
}
function obj() {
var x1 = Number(document.getElementById('a').value);
var x2 = Number(document.getElementById('b').value);
var x3 = Number(document.getElementById('H').value);
var obj = x1 * x3 * x2;
document.getElementById('wynik').innerHTML = "Wynik: " + obj;
return false;
}
function Sprawdzenie(Dana)
{
if (Dana == "")
{
alert("Wprowadz cyfre!!!");
return false;
}
if (!isNaN(Dana))
{
return false;
}
else alert("Podane wartosci nie mogą być literami!!");
}
document.getElementById('obw').onclick = obwod;
document.getElementById('pole').onclick = pole;
document.getElementById('obj').onclick = obj;
</script>
</body>
</html>
Bardzo proszę o pomoc gdyż chciałbym to zrozumieć. Z góry dziękuję.