Obliczanie pola i obwodu z formularza

pytanie zadane 20 lutego 2019 w JavaScript przez Rafał Masny Obywatel (1,700 p.)

Dlaczego nie działa?

Jak zrobić, żeby wynik pokazywał się pod polem podaj długość, a nie na nowej stronie

<html>
<head>
<meta charset="UTF-8">


</head>
<body>

<script type="text/javascript">
function pole()
{
    var a= parseInt(document.getElementById("dlugosc")).value;
    var b= a*a;
   
document.write("Pole kwadratu: "+b);
}
function obwod()
{
    var a= parseInt(document.getElementById("dlugosc")).value;
    var b= 4*a;

document.write("Obwód kwadratu: "+b);
}
</script>

<h1>KWADRAT</h1>
Podaj długość boku:    <input type="text" id="dlugosc">
<br>

<input type="button" name="pole" value="Pole" Onclick="pole()">

<input type="button" name="obwod" value="Obwod" Onclick="obwod()">



</body>
</html>

2 odpowiedzi

odpowiedź 20 lutego 2019 przez k.wichura Pasjonat (19,870 p.)

odpowiedź 20 lutego 2019 przez ThePolishPPK Bywalec (2,020 p.)

Polecenie document.write(...) "podmienia" kontent strony, czyli usuwa wszystko i wstawia to co podajesz jako argument.
Abyś mógł wstawić wynik pod tym tekstem, musisz dać jakiś znacznik któremu przypiszesz ID (np. <b id='wynik'></b>). A aby wstawić tam wynik, w skrypcie musisz się odwołać do tego elementu, możesz to zrobić przez polecenie document.getElementById("wynik"), a następnie zamienić mu kontent poprzez innerText lub innerHTML, dodają jeszcze znak równości (=) i tekst. Cały kod powinien wyglądać tak:

<html>
<head>
<meta charset="UTF-8">
 
 
</head>
<body>
 
<script type="text/javascript">
function pole()
{
    var a= parseInt(document.getElementById("dlugosc").value);
    var b= a*a;
    
document.getElementById("wynik").innerText = "Pole kwadratu: "+b;
}
function obwod()
{
    var a= parseInt(document.getElementById("dlugosc").value);
    var b= 4*a;
 
document.getElementById("wynik").innerText = "Obwód kwadratu: "+b;
}
</script>
 
<h1>KWADRAT</h1>
Podaj długość boku:    <input type="text" id="dlugosc">
<br>
<b id="wynik"></b>
<br> 
<input type="button" name="pole" value="Pole" Onclick="pole()">
<input type="button" name="obwod" value="Obwod" Onclick="obwod()">
 
 
 
</body>
</html>

Zauważyłem że w kodzie masz błąd, a dokładnie w linice 12 i 19, gdzie w poleceniu parseInt(document.getElementById("dlugosc")).value, wyciągasz wartość z parseInt, a nie z elementu, powinno to wyglądać tak: parseInt(document.getElementById("dlugosc").value)