<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>factorial</title>
</head>
<body>
<!-- https://github.com/arkenidar/editor -->
<script type="text/javascript">
function factorial(number) {
// non-negative integer number
const validInput = Number.isInteger(number) && number >= 0
if (validInput == false) return NaN
// accumulate multiplications
for (var result = 1; number != 0; number--)
result = result * number
// output
return result
}
</script>
<h1>Factorial</h1>
<p>Calculate the factorial of a non-negative integer number.</p>
<p>Factorial of 0 is 1.</p>
<script type="text/javascript">
function inputNumberButtons() {
inputNumber.value = parseInt(inputNumber.value) + parseInt(this.innerText)
validateInputFactorial(inputNumber)
}
</script>
<button type="button" onclick="inputNumberButtons.call(this)">-1</button>
<style>
#inputNumber {
width: 3em;
border: 1px solid black;
}
</style>
<input type=number id=inputNumber placeholder="integer number" min=0 step=1 value=0
oninput="validateInputFactorial(this)" required>
<button type="button" onclick="inputNumberButtons.call(this)">+1</button>
factorial of <span id=inputNumberDisplay></span> is: <span id=outputFactorial></span>.
<script type="text/javascript">
// handle input event
inputNumber.oninput = (event) => validateInputFactorial(inputNumber)
// initialize initial state
validateInputFactorial(inputNumber)
// input handling function
function validateInputFactorial(inputFactorial) {
// input validity check
if (inputFactorial.validity.valid == false) inputFactorial.value = 0
// normalize input value e.g. remove leading zeros
inputFactorial.value = parseInt(inputFactorial.value)
// input to output
outputFactorial.innerText = factorial(parseInt(inputFactorial.value))
inputNumberDisplay.innerText = inputFactorial.value
}
</script>
<!-- https://github.com/arkenidar/editor -->
<script src="https://arkenidar.com/web/show-source.js"></script>
</body>
</html>