• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie pokazuje wyniku Pola trójkąta i wysokości trójkąta JavaScript

VPS Starter Arubacloud
+1 głos
443 wizyt
pytanie zadane 8 grudnia 2021 w JavaScript przez Martita Bywalec (2,470 p.)

Proszę o pomoc. Nie wiem co mam źle - Nie pokazuje wyników. Jestem początkująca. Szukałam i nie znalazłam.

Chce zrobić taki kalkulator jak na stronie https://www.naukowiec.org/kalkulator-pol-i-objetosci/trojkat.html

Na razie mam pola bok a, wysokość h i Pole trójkąta P. Chcę aby po wpisaniu liczb w pola a i h pokazał mi wynik w polu P. Następnie po wpisaniu liczb w tych samych polach a i P pokazał mi wynik w polu h. Wiem jak zrobić aby pokazał się wynik w polu P, jeśli nie trzeba by obliczać h. Niestety nie wiem  jak zrobić aby pokazał się wynik w polu h.

 

HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="pole_trojkata.js"></script>
</head>

<body>
    <form id="licz" action="" method="post" autocomplete="off">
        <div style="padding-left: 80px;">
            <h3>Wysokość Trójkąta </h3>
            <p>h = (2 * P) / a</p><br>
            <h3>Pole Trójkąta </h3>
            <p>P = (a * h) / 2</p><br>
            <p>Bok a <input type="text" id="a"></p>
            <p>Pole P <input type="text" id="P"></p>
            <p>Wysokość h <input type="text" id="h"></p>
            <input type="button" value="Oblicz" style="cursor: pointer;" onclick="oblicz()">
            <input type="reset" value="RESETUJ" style="cursor: pointer;" onclick="zresetuj()">
        </div>

    </form>

</body>

</html>

 

JavaScript

function oblicz() {
    const a = parseInt(document.getElementById('a').value);
    const h = parseInt(document.getElementById('h').value);
    const P = parseInt(document.getElementById('P').value);

    const h = (2 * parseInt(P)) / parseInt(a);
    const P = (parseInt(a) * parseInt(h)) / 2;

    document.getElementById('p').value = P;

    document.getElementById('h').value = h;


    return false;
}

function resetuj() {

    document.getElementById('P').innerHTML = '';
    document.getElementById('h').innerHTML = '';


}

 

1 odpowiedź

0 głosów
odpowiedź 9 grudnia 2021 przez VBService Ekspert (251,210 p.)
wybrane 9 grudnia 2021 przez Martita
 
Najlepsza

Jeżeli masz <input type="reset">  w "obrębie" <form>, pola typu <input type="text"> są "resetowane" bez dodatkowego przypisywania zdarzenia do przycisku <input type="reset">.

<input type="reset" value="RESETUJ" style="cursor: pointer;">

 

Chcę aby po wpisaniu liczb w pola a i h pokazał mi wynik w polu P. Następnie po wpisaniu liczb w tych samych polach a i P pokazał mi wynik w polu h. 

 

możesz użyć warunków  wink

 

przykład

<!DOCTYPE html>
<html lang="pl">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="pole_trojkata.js"></script>
  </head>

  <body>
    <form id="licz" action="" method="post" autocomplete="off">
      <div style="padding-left: 80px;">
        <h3>Wysokość Trójkąta </h3>
        <p>h = (2 * P) / a</p><br>
        <h3>Pole Trójkąta </h3>
        <p>P = (a * h) / 2</p><br>
        <p>Bok a <input type="text" id="a"></p>
        <p>Pole P <input type="text" id="P"></p>
        <p>Wysokość h <input type="text" id="h"></p>
        <input type="button" value="Oblicz" style="cursor: pointer;" onclick="oblicz()">
        <input type="reset" value="RESETUJ" style="cursor: pointer;">
      </div> 
    </form> 
  </body> 
</html>
let last_P, last_h;

function oblicz() {
const a = parseInt(document.getElementById('a').value),
      h = parseInt(document.getElementById('h').value),
      P = parseInt(document.getElementById('P').value);

  if ((P && a) && last_P != P) {
    document.getElementById('h').value = (2 * P) / a;
    last_P = P;
  }
  if ((a && h) && last_h != h)  {
    document.getElementById('P').value = (a * h) / 2;
    last_h = h;
  }

  return false;
}

 

komentarz 9 grudnia 2021 przez Martita Bywalec (2,470 p.)

Co oznacza ta linika kodu? Wiem co to są za operatory, ale nie wiem co robi ta linika kodu.

if ((P && a) && last_P != P)
komentarz 9 grudnia 2021 przez Martita Bywalec (2,470 p.)

@VBService, prawie zrobiłam. Po wprowadzeniu liczb w polu a, h i kliknięciu oblicz wyświetla mi prawidłowy wynik w polu P, ale w polu h wyświetla NaN. Gdzie mam błąd?

JavaScript

function oblicz() {
    const a = parseInt(document.getElementById('a').value);
    const h = parseInt(document.getElementById('h').value);
    const P = parseInt(document.getElementById('P').value);

    document.getElementById('P').value = (parseInt(a) * parseInt(h)) / 2;
    document.getElementById('h').value = (2 * parseInt(P)) / parseInt(a);

    return false;
}

function resetuj() {

    document.getElementById('P').innerHTML = '';
    document.getElementById('h').innerHTML = '';

}

 

komentarz 9 grudnia 2021 przez VBService Ekspert (251,210 p.)
edycja 9 grudnia 2021 przez VBService

Po wprowadzeniu liczb w polu a, h i kliknięciu oblicz

Sprawdź

function oblicz() {
    const a = parseInt(document.getElementById('a').value);
    const h = parseInt(document.getElementById('h').value);
    const P = parseInt(document.getElementById('P').value);  
    console.log('Krok 1','a=',a,'h=',h,'P=',P);
 
    document.getElementById('P').value = (parseInt(a) * parseInt(h)) / 2;  
    console.log('Krok 2','a=',a,'h=',h,'P=',P);
  
    document.getElementById('h').value = (2 * parseInt(P)) / parseInt(a);
    console.log('Krok 3','a=',a,'h=',h,'P=',P);
 
    return false;
} 

 

a teraz to

function oblicz() {
    const a = parseInt(document.getElementById('a').value);
    const h = parseInt(document.getElementById('h').value);
    let P = parseInt(document.getElementById('P').value);  
    console.log('Krok 1','a=',a,'h=',h,'P=',P);
 
    document.getElementById('P').value = (parseInt(a) * parseInt(h)) / 2;
    P = parseInt(document.getElementById('P').value);
    console.log('Krok 2','a=',a,'h=',h,'P=',P);
  
    document.getElementById('h').value = (2 * parseInt(P)) / parseInt(a);
    console.log('Krok 3','a=',a,'h=',h,'P=',P);
 
    return false;
} 

 

a co się stanie gdy:

"Po wprowadzeniu liczb w polu a, P i kliknięciu oblicz"

więc

function oblicz() {
  const a = parseInt(document.getElementById('a').value);
  let h = parseInt(document.getElementById('h').value);
  let P = parseInt(document.getElementById('P').value);  
  console.log('Krok 1','a=',a,'h=',h,'P=',P);

  if (a && h)
    P = (parseInt(a) * parseInt(h)) / 2;  
  console.log('Krok 2','a=',a,'h=',h,'P=',P);

  if (a && P)
    h = (2 * parseInt(P)) / parseInt(a);
  console.log('Krok 3','a=',a,'h=',h,'P=',P);
  
  document.getElementById('P').value = P;
  document.getElementById('h').value = h;
  
  return false;
} 

 

komentarz 9 grudnia 2021 przez VBService Ekspert (251,210 p.)
edycja 9 grudnia 2021 przez VBService

In the plain "if" the variable will be coerced to a Boolean and it uses to Boolean on the object

 

Argument Type Result
Undefined  false
Null false
Boolean The result equals the input argument (no conversion)
Number The result is false if the argument is +0, −0, or NaN, otherwise the result is true
String The result is false if the argument is the empty or 
String (its length is zero), otherwise the result is true.
Object true.

 

komentarz 9 grudnia 2021 przez Martita Bywalec (2,470 p.)

@VBService, Wielkie dzięki już rozumiem.

Podobne pytania

0 głosów
2 odpowiedzi 7,633 wizyt
0 głosów
1 odpowiedź 3,387 wizyt
pytanie zadane 22 sierpnia 2017 w JavaScript przez Angie Nowicjusz (120 p.)
0 głosów
4 odpowiedzi 10,336 wizyt
pytanie zadane 8 marca 2017 w JavaScript przez niezalogowany

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...