I'm a completely beginner in Javascript and trying to create a simple program to calculate the area of a circle. I'm currently stuck on how to create an output box containing the variable area. Apologies if this is a dumb question, but I do appreciate any kind of help!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Area Calculator</title>
</head>
<body>
<fieldset><h3><i>Enter radius of a circle:</i></h3>
<form name="circleForm" onsubmit="calc()">
<label for="name">Enter a number:</label><br>
<input type="number" name="radius" id="radius" placeholder="radius" required><br>
<button type="submit">Calculate Area</button>
<button type="reset">Reset value</button>
</form>
<div id="result">
<output name="result" onsubmit="result()">
</output>
</div>
</fieldset>
</body>
<script>
function calc() {
var radius = document.forms.circleForm.elements.namedItem("radius").value;
var area = (radius**2)*3.14
var calculate;
return area
document.getElementById("result").innerHTML = area;
}
</script>
</html>
Add an event listener to your button and run your calc function from there.
Using event.preventDefault() will prevent the browser from submitting the form and refreshing the page.
Setting the innerHTML of the result div is the right thing to do but you'd put it after your function returned a value, which was preventing it from being executed.
let calculate = document.getElementById('calculate');
calculate.addEventListener('click', () => {
event.preventDefault();
calc();
});
function calc() {
var radius = document.forms.circleForm.elements.namedItem("radius").value;
var area = (radius ** 2) * 3.14
var calculate;
document.getElementById("result").innerHTML = area;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Area Calculator</title>
</head>
<body>
<fieldset>
<h3><i>Enter radius of a circle:</i></h3>
<form name="circleForm">
<label for="name">Enter a number:</label><br>
<input type="number" name="radius" id="radius" placeholder="radius" required><br>
<button id="calculate">Calculate Area</button>
<button type="reset">Reset value</button>
</form>
<div id="result">
</div>
</fieldset>
</body>
</html>this way
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Area Calculator</title>
<style>
form {
width : 20em;
}
legend {
font-size : 1.2em;
font-weight : bold;
font-style : italic;
padding : 0 .4em;
}
label {
font-size : .8em;
}
input,output {
display : block;
}
button {
margin : .8em .4em;
}
</style>
</head>
<body>
<form name="circle-form">
<fieldset>
<legend>Enter radius of a circle:</legend>
<label>Enter a number:</label>
<input type="number" name="radius" id="radius" placeholder="radius" required><br>
<button type="submit">Calculate Area</button>
<button type="reset">Reset value</button>
<output name="result"> </output>
</fieldset>
</form>
<script>
const circleForm = document.forms['circle-form'];
circleForm.onsubmit = e =>
{
e.preventDefault() // disable page submit ==> relaod page
circleForm.result.textContent = (circleForm.radius.valueAsNumber ** 2) * Math.PI
}
circleForm.onreset = e =>
{
circleForm.result.innerHTML = ' '
circleForm.radius.value = ''
}
</script>
</body>
</html>
Demo
const circleForm = document.forms['circle-form'];
circleForm.onsubmit = e =>
{
e.preventDefault() // disable page submit ==> relaod page
circleForm.result.textContent = (circleForm.radius.valueAsNumber ** 2) * Math.PI
}
circleForm.onreset = e =>
{
circleForm.result.innerHTML = ' '
}form {
width : 20em;
}
legend {
font-size : 1.2em;
font-weight : bold;
font-style : italic;
padding : 0 .4em;
}
label {
font-size : .8em;
}
input,output {
display : block;
}
button {
margin : .8em .4em;
}<form name="circle-form">
<fieldset>
<legend>Enter radius of a circle:</legend>
<label>Enter a number:</label>
<input type="number" name="radius" id="radius" placeholder="radius" required><br>
<button type="submit">Calculate Area</button>
<button type="reset">Reset value</button>
<output name="result"> </output>
</fieldset>
</form>