how to display function calculation in html using button with eventhandler
up vote
1
down vote
favorite
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>Can someone tell me why the result of the returned calculation flashes and then disappears from the screen? I would like it to remain there until another set of numbers are input for a new round-thank you…
javascript html
asked Nov 20 at 23:51
ppanasis
194
add a comment |
up vote
1
down vote
favorite
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>Can someone tell me why the result of the returned calculation flashes and then disappears from the screen? I would like it to remain there until another set of numbers are input for a new round-thank you…
javascript html
asked Nov 20 at 23:51
ppanasis
194
2
Because you're submitting your form?
– j08691
Nov 20 at 23:54
Thank you for your help-it's greatly appreciated!
– ppanasis
2 days ago
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>Can someone tell me why the result of the returned calculation flashes and then disappears from the screen? I would like it to remain there until another set of numbers are input for a new round-thank you…
javascript html
asked Nov 20 at 23:51
ppanasis
194
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>Can someone tell me why the result of the returned calculation flashes and then disappears from the screen? I would like it to remain there until another set of numbers are input for a new round-thank you…
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>javascript html
javascript html
asked Nov 20 at 23:51
ppanasis
194
asked Nov 20 at 23:51
ppanasis
194
asked Nov 20 at 23:51
ppanasis
194
asked Nov 20 at 23:51
ppanasis
194
asked Nov 20 at 23:51
ppanasis
194
194
2
Because you're submitting your form?
– j08691
Nov 20 at 23:54
Thank you for your help-it's greatly appreciated!
– ppanasis
2 days ago
add a comment |
2
Because you're submitting your form?
– j08691
Nov 20 at 23:54
Thank you for your help-it's greatly appreciated!
– ppanasis
2 days ago
2
2
Because you're submitting your form?
– j08691
Nov 20 at 23:54
Because you're submitting your form?
– j08691
Nov 20 at 23:54
Thank you for your help-it's greatly appreciated!
– ppanasis
2 days ago
Thank you for your help-it's greatly appreciated!
– ppanasis
2 days ago
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
You are submitting form, and form will go to action...so that you need prevent default form action, and you can do this by using event.preventDefault(); for html form tag.
Just edit your form tag by adding: onsubmit="event.preventDefault();" and all will work fine.
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
add a comment |
up vote
1
down vote
The default action of a button within a form is to submit it. Give your button the attribute type of button to prevent the form submission:
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 20 at 23:58
MichaelvE
1,008136
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.type="button"vstype="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button'stype="submit"?
– radarbob
Nov 21 at 2:57
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
You are submitting form, and form will go to action...so that you need prevent default form action, and you can do this by using event.preventDefault(); for html form tag.
Just edit your form tag by adding: onsubmit="event.preventDefault();" and all will work fine.
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
add a comment |
up vote
1
down vote
You are submitting form, and form will go to action...so that you need prevent default form action, and you can do this by using event.preventDefault(); for html form tag.
Just edit your form tag by adding: onsubmit="event.preventDefault();" and all will work fine.
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
add a comment |
up vote
1
down vote
up vote
1
down vote
You are submitting form, and form will go to action...so that you need prevent default form action, and you can do this by using event.preventDefault(); for html form tag.
Just edit your form tag by adding: onsubmit="event.preventDefault();" and all will work fine.
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
You are submitting form, and form will go to action...so that you need prevent default form action, and you can do this by using event.preventDefault(); for html form tag.
Just edit your form tag by adding: onsubmit="event.preventDefault();" and all will work fine.
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form onsubmit="event.preventDefault();">
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
answered Nov 21 at 0:09
Anees Hikmat Abu Hmiad
1,250924
1,250924
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
add a comment |
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Thanks Anees Hikmat Abu Hmiad, your help is greatly appreciated!
– ppanasis
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
Welcome mate, Good luck :D
– Anees Hikmat Abu Hmiad
2 days ago
add a comment |
up vote
1
down vote
The default action of a button within a form is to submit it. Give your button the attribute type of button to prevent the form submission:
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 20 at 23:58
MichaelvE
1,008136
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.type="button"vstype="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button'stype="submit"?
– radarbob
Nov 21 at 2:57
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
add a comment |
up vote
1
down vote
The default action of a button within a form is to submit it. Give your button the attribute type of button to prevent the form submission:
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 20 at 23:58
MichaelvE
1,008136
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.type="button"vstype="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button'stype="submit"?
– radarbob
Nov 21 at 2:57
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
add a comment |
up vote
1
down vote
up vote
1
down vote
The default action of a button within a form is to submit it. Give your button the attribute type of button to prevent the form submission:
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 20 at 23:58
MichaelvE
1,008136
The default action of a button within a form is to submit it. Give your button the attribute type of button to prevent the form submission:
//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>//area = 1/2 b * h
var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);
function findArea(base, height) {
var base = document.getElementById("base").value;
var height = document.getElementById("height").value;
var area = base * height / 2;
var result = document.getElementById('result');
return result.textContent = area;
}<form>
<input type="number" id="base">
<p>Enter base measurement</p>
<input type="number" id="height">
<p>Enter height measurement</p>
<button type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>answered Nov 20 at 23:58
MichaelvE
1,008136
edited Nov 21 at 0:26
answered Nov 20 at 23:58
MichaelvE
1,008136
answered Nov 20 at 23:58
MichaelvE
1,008136
answered Nov 20 at 23:58
MichaelvE
1,008136
1,008136
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.type="button"vstype="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button'stype="submit"?
– radarbob
Nov 21 at 2:57
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
add a comment |
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.type="button"vstype="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button'stype="submit"?
– radarbob
Nov 21 at 2:57
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.
type="button" vs type="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button's type="submit"?– radarbob
Nov 21 at 2:57
upvoted because it hints at the subtle, underlying thing that makes a button click submit or not - a "plain-old button" vice a "submit button" - i.e.
type="button" vs type="submit". This is fundamental form-ology that must be groked. Although I must say the preventDefault() answer makes the "do not submit this form" intent very explicit. But can we say that what is actually form "default" is the button's type="submit"?– radarbob
Nov 21 at 2:57
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
Thanks Michael, greatly appreciated!
– ppanasis
2 days ago
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403351%2fhow-to-display-function-calculation-in-html-using-button-with-eventhandler%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Because you're submitting your form?
– j08691
Nov 20 at 23:54
Thank you for your help-it's greatly appreciated!
– ppanasis
2 days ago