Площа трикутника

Використання форми для отримання й обробки даних

by oleksandr_s

HTML

<h1>Площа трикутника</h1>
<form name="trArea">
    <fieldset>
        <legend>Обчислення площі трикутника за формулою Герона</legend>
        <p>
            <label for="first">Перша сторона: </label>
            <input type="text" name="first">
        </p>
        <p>
            <label for="second">Друга сторона: </label>
            <input type="text" name="second">
        </p>
        <p>
            <label for="third">Третя сторона: </label>
            <input type="text" name="third">
        </p>
        <p>
            <input type="button" name="calc" value="Обчислити" onclick="geron()">
        </p>
        <p id="stop"></p>
        <div id="answer">
            <label for="answer">ВІДПОВІДЬ: </label>
            <input type="text" name="answer">
        </div>
        <p>
            <input type="button" name="clear" value="Нове обчислення" onclick="clearForm()">
        </p>
    </fieldset>
</form>

CSS

body {
    font-family: Calibri;    
}

legend {
    font-weight: bold;
    font-style: italic;
}

fieldset {
    width: 40%;
}

label {
    font-weight: bold;
    display: inline-block;
    width: 30%;
}

#stop {
    color: red;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
}

JavaScript

function geron() {
	var x = parseFloat(document.forms.trArea.first.value)
	var y = parseFloat(document.forms.trArea.second.value)
	var z = parseFloat(document.forms.trArea.third.value)
    if (x>=y+z || y>=x+z || z>=x+y) {
		/*alert('Трикутник не існує')*/
        document.getElementById('stop').innerHTML="Трикутник не існує!"
        document.getElementById('answer').hidden = true
	} else {
		let p = (x + y + z) / 2
    	let s = Math.sqrt(p * (p - x) * (p - y) * (p - z))
    	document.forms.trArea.answer.value = s
    }
}

function clearForm() {
	document.forms.trArea.first.value = ""
	document.forms.trArea.second.value = ""
	document.forms.trArea.third.value = ""
	document.forms.trArea.answer.value = ""
	document.getElementById('stop').innerHTML=""
	document.getElementById('answer').hidden = false
}