Zadání:
Vytvořte formulář pro výpočet objemu koule a obsahu kruhu.
K tomuto příkladu budeme potřebovat formulář se dvěma kolonkami, kterému dáme id kouleForm. Prvně vždy vytvoříme HTML div, kterému dáme id. Do divu budeme později vypisovat výstup.
JavaScriptový kód vždy začínáme otevíracím tagem scriptu(<script>), ukončujeme ho uzavíracím tagem scriptu
(</script>).
JavaScript prvně prohledá celou stránku pro formulář s id kouleForm díky document.getElementById. Poté díky
addEventListener počká, až uživatel zmáčkne tlačítko Vypočti (submit).
Poté vytvoříme konstantu r, do které se vloží hodnoty z formuláře.
Do konstant V a S vypočítáme objem a obsah s předchozí konstantou r a konstantou Math.PI.
Vytvoříme proměnné na text o objemu a obsahu (koule a kruh), do kterých vložíme i původní poloměr.
Nakonec zprávu vložíme do HTML divu.
<form id="kouleForm">
Zadej poloměr:
<input type="text" id="r" name="r" /><br />
<input type="submit" value="Vypočti" />
</form>
<div id="koule-vysledek"></div>
<script>
document.getElementById("kouleForm").addEventListener("submit", function (e) {
e.preventDefault();
const r = document.getElementById("r").value;
const V = (4 / 3) * Math.PI * r * r * r;
const S = Math.PI * r * r;
let koule = "<h2>Objem koule s poloměrem " + r + " je " + V.toFixed(2) + " jednotek krychlových</h2>";
let kruh = "<h2>Obsah kruhu s poloměrem " + r + " je " + S.toFixed(2) + " jednotek čtverečních</h2>";
document.getElementById("koule-vysledek").innerHTML = koule + kruh;
});
</script>