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

Wyczyszczenie formularza i wyniku HTML, JAVASCRIPT

VPS Starter Arubacloud
+1 głos
499 wizyt
pytanie zadane 10 września 2021 w JavaScript przez Martita Bywalec (2,470 p.)

Dzień dobry

Szukałam i nie znalazłam. Dopiero zaczęłam naukę w javascript.

Zrobiłam kalkulator, który oblicza pole kwadratu. Po kliknięciu w oblicz wyświetla prawidłowo wynik.

Chcę aby po kliknięciu w przycisk czyściło mi pole formularza i wynik. Zrobiłam przycisk resetuj , ale on tylko czyści pole formularza a nie czyści wyniku.

Po zrobieniu przycisku odśwież czyści tylko wynik a nie czyści  pola formularza.

Jak zrobić aby czyściło mi pole formularza i wynik?

 

<!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_kwadratu.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post">
        <div>
            <h3>Pole Kwadratu</h3>
            <p>a <sup>2</sup> <br></p>
            Bok A <input type="number" id="a"><br>
            <span id="k">= </span><br><br>
            <input type="button" value="Oblicz" onclick="oblicz()">
            <input type="reset" value="zresetuj">
            
        </div>
        
    </form>

</body>

</html>

 

function oblicz() {
    const a = document.getElementById('a').value;
    const k = parseInt(a) * parseInt(a);
    document.getElementById('k').innerHTML = +a + ' * ' + a + ' = ' + a + "<sup>" + 2 + " </sup> " + ' = ' + k;
    return false;
}

komentarz 10 września 2021 przez qax Dyskutant (8,060 p.)
Musisz napisać drugą funkcję, która zmieni zawartość elementu o id k do pierwotnej postaci w chwili kliknięcia przycisku reset. Natomiast do formularza możesz dodać atrybut autocomplete="off".
komentarz 10 września 2021 przez Martita Bywalec (2,470 p.)
Przepraszam jeszcze tego się nie uczyliśmy więc nie rozumiem jak to zrobić. Możesz mi jaśniej wytłumaczyć jak to zrobić?
komentarz 10 września 2021 przez Martita Bywalec (2,470 p.)
Kod ma być jak najprościej zrobiony.
komentarz 10 września 2021 przez VBService Ekspert (251,210 p.)
edycja 10 września 2021 przez VBService

@Marta Długa, lepiej "parsować" wynik z elementu o id "a" do zmiennej "a" przy pobieraniu danych, raz.

Propozycja

function oblicz() {
    const a = document.getElementById('a').value;
    const k = parseInt(a) * parseInt(a);
    document.getElementById('k').innerHTML = +a + ' * ' + a + ' = ' + a + "<sup>" + 2 + " </sup> " + ' = ' + k;
    return false;
}

na

function oblicz() {
    const a = parseInt(document.getElementById('a').value);
    document.getElementById('k').innerHTML = a + ' * ' + a + ' = ' + a + '<sup>2</sup> = ' + (a*a);
}

 

komentarz 11 września 2021 przez Comandeer Guru (599,730 p.)
Przypominam, że komentarze nie służą do zamieszczania odpowiedzi.

1 odpowiedź

+1 głos
odpowiedź 10 września 2021 przez qax Dyskutant (8,060 p.)
wybrane 10 września 2021 przez Martita
 
Najlepsza
function resetuj() {

    document.getElementById('k').innerHTML = '';

}
<!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_kwadratu.js"></script>
</head>
 
<body>
    <form id="oblicz" action="" method="post" autocomplete="off">
        <div>
            <h3>Pole Kwadratu</h3>
            <p>a <sup>2</sup> <br></p>
            Bok A <input type="number" id="a"><br>
            <span id="k">= </span><br><br>
            <input type="button" value="Oblicz" onclick="oblicz()">
            <input type="reset" value="zresetuj" onclick="resetuj()">
             
        </div>
         
    </form>
 
</body>
 
</html>

 

1
komentarz 10 września 2021 przez Martita Bywalec (2,470 p.)
Dziękuję, już rozumiem i dokładnie przeanalizowałam kod.
komentarz 10 września 2021 przez qax Dyskutant (8,060 p.)

Nie wiedziałem nawet czy zadziała - pisałem z telefonusmiley

komentarz 10 września 2021 przez Martita Bywalec (2,470 p.)
Działa dzięki

Podobne pytania

+1 głos
1 odpowiedź 443 wizyt
0 głosów
2 odpowiedzi 491 wizyt
0 głosów
0 odpowiedzi 163 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 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!

...