<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>
How to sum of all numbers in a
range using JavaScript?
</
title
>
<
style
>
.container {
text-align: center;
}
.inCont {
display: inline-block;
text-align: start;
padding: 15px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
h3
>
Enter maximum and minimum numbers and
click the below button <
br
/> to get the sum
of numbers fall inside the entered numbers.
</
h3
>
<
form
id
=
"myForm"
>
<
div
class
=
"inCont"
>
<
label
for
=
"minNum"
>
Minimum Number:
</
label
><
br
/>
<
input
type
=
"number"
id
=
"minNum"
>
</
div
>
<
div
class
=
"inCont"
>
<
label
for
=
"maxNum"
>
Maximum Number:
</
label
><
br
/>
<
input
type
=
"number"
id
=
"maxNum"
>
</
div
><
br
/><
br
/>
<
input
type
=
"submit"
value
=
"Find Sum"
>
</
form
>
<
p
id
=
"result"
></
p
>
</
div
>
<
script
>
const myForm =
document.getElementById('myForm');
myForm.addEventListener('submit', function (e) {
e.preventDefault();
let sum = 0;
const result =
document.getElementById('result');
const minNum =
document.getElementById('minNum').value;
const maxNum =
document.getElementById('maxNum').value;
const numberMin = Number(minNum);
const numberMax = Number(maxNum);
if (minNum === "" || maxNum === "") {
result.innerHTML = `
<
b
style
=
'color: red'
>
Input fields can not be empty!!
</
b
>`;
}
else if (numberMin > numberMax) {
result.innerHTML = `
<
b
style
=
'color: red'
>
Minimum number must be less than
Maximum number!!
</
b
>`;
}
else {
const n = (numberMax - numberMin) - 1;
const firstVal = numberMin+1;
sum = n/2*(2*(firstVal)+(n-1));
result.innerHTML = `
<
b
style
=
'color: green'
>
Sum of numbers between ${numberMin}
and ${numberMax} is: ${sum}
</
b
>`;
}
})
</
script
>
</
body
>
</
html
>