Bu problemi Java ile dikdörtgenin alanını ve çevresini hesaplayan program başlığında 2 ay kadar önce çözmüştüm. Şimdi konsola sıkışmak gibi bir derdimiz de olmadığı için biraz html de katalım ve dikdörtgenin alan ve çevresi için a ve b kenarlarını input üzerinden alalım.
Not: Tasarım ile ilgili mümkün olduğunca hiçbir düzenleme yapmamayı düşünüyorum. Bu yüzden stil kullanmadım.
Not 2: Süreç boyunca ECMAScript 6 kullanmaya çalışacağım ve JQuery kullanmayacağım.
HTML Kodları:
<form>
<input id="a" placeholder="Kısa Kenar">
<input id="b" placeholder="Uzun Kenar">
<a type="submit" id="hesapla">Hesapla</a>
<p>Dikdörtgenin çevresi: <span id="spancevre"></span></p>
<p>Dikdörtgenin alanı: <span id="spanalan"></span></p>
<p></p>
</form>
JavaScript Kodları:
document.getElementById('hesapla').addEventListener('click', ()=>{
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var cevre=2*(Number(a) + Number(b));
var alan = a*b;
document.getElementById("spancevre").innerHTML = cevre;
document.getElementById("spanalan").innerHTML = alan;