Strona się odświeża po wykonaniu funkcji

pytanie zadane 1 lipca 2016 w JavaScript przez CodeBlocksCPP Obywatel (1,010 p.)

<head>

 <script type="text/javascript">

 function polekw() {
        var a = document.forms['kwadrat'].dlugosc.value;
        document.getElementById("wynikkw").value=a*a;
    }

</script>

</head>

<body>
<button onclick="pokakwadrat()">Kwadrat</button>
<div id="kwa" style="display:block;">
<form id="kwadrat">
Podaj długość boku kwadratu: <input type="text" name="dlugosc"><br>
<button onclick="polekw()">Pole</button>
<input id="wynikkw">
</form>
</div>
</body>

Dlaczego wynik wyświetla się tylko na 1s, a potem strona się odświeża? Chcę aby wynik pokazywał się cały czas.

1 odpowiedź

odpowiedź 1 lipca 2016 przez niezalogowany
wybrane 1 lipca 2016 przez CodeBlocksCPP

Najlepsza

Jeżeli występuje tylko jeden button w form, domyślnie staje się on submitem. Klikając na przycisk "Pole" wysyłasz formularz. Jeśli w form, atrybut action jest nieokreślony, domyślne formularz zostaje wysłany pod ten sam adres na którym się znajduje -> stąd wrażenie, w sumie słuszne, odświeżenia strony.

Rozwiązanie: Usuń znacznik <form>

Wskazówki co do samego kodu:

używaj addEvenetListener zamiast onclick
skrypty wstawiaj przed końcem tagu <body>
<div id="kwa" style="display:block;"> - divy domyślne są obiektami blokowymi, nie trzeba stosować display: block;
Wszystkie inputy muszą mieć etykietę - label - im szybciej wpadnie Ci to w nawyk - tym lepiej
Rób wcięcia w kodzie HTML : p