Wyczyszczenie formularza i wyniku HTML, JAVASCRIPT

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 (252,660 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;
}

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 (600,690 p.)

Przypominam, że komentarze nie służą do zamieszczania odpowiedzi.

1 odpowiedź

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>