• 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

+1 głos
86 wizyt
pytanie zadane 10 września w JavaScript przez Marta Długa Obywatel (1,740 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 przez qax Mądrala (6,510 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 przez Marta Długa Obywatel (1,740 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 przez Marta Długa Obywatel (1,740 p.)
Kod ma być jak najprościej zrobiony.
komentarz 10 września przez VBService VIP (137,830 p.)
edycja 10 września 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 przez Comandeer Guru (560,300 p.)
Przypominam, że komentarze nie służą do zamieszczania odpowiedzi.

1 odpowiedź

+1 głos
odpowiedź 10 września przez qax Mądrala (6,510 p.)
wybrane 10 września przez Marta Długa
 
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 przez Marta Długa Obywatel (1,740 p.)
Dziękuję, już rozumiem i dokładnie przeanalizowałam kod.
komentarz 10 września przez qax Mądrala (6,510 p.)

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

komentarz 10 września przez Marta Długa Obywatel (1,740 p.)
Działa dzięki

Podobne pytania

0 głosów
0 odpowiedzi 5 wizyt
0 głosów
2 odpowiedzi 128 wizyt
0 głosów
0 odpowiedzi 24 wizyt

85,873 zapytań

134,644 odpowiedzi

298,914 komentarzy

56,739 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 926p. - rucin93
  2. 925p. - Whistleroosh
  3. 912p. - nidomika
  4. 876p. - adrian17
  5. 867p. - Michal Drewniak
  6. 866p. - Mikbac
  7. 863p. - Mateusz Bogdan
  8. 859p. - CC PL
  9. 797p. - Argeento
  10. 704p. - ScriptyChris
  11. 683p. - tokox
  12. 660p. - Vinox
  13. 645p. - TheLukaszNs
  14. 642p. - s. Dorota Kowalewska
  15. 601p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...