This is a typical fizz buzz example written in JavaScript that runs in a web page. The input defines the number of iterations. A number divisible by 3 displays the word "Fizz", a number divisible by 5 displays "Buzz", and a number divisible by both 3 and 5 displays "Fizz Buzz".
<!-- fizzbuzz.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fizz Buzz Example</title>
<style>
body {
background-color: lightgrey;
margin: 40px auto;
max-width: 800px;
}
</style>
</head>
<body>
<label>
<b>Number of iterations:</b>
<input id="numIterations" type="number" value="5" min="2">
</label>
<table id="mytable"></table>
<script>
function run() {
const numIterations = document.getElementById('numIterations').value;
const tableElem = document.getElementById('mytable');
tableElem.innerHTML = '';
for (let i = 1; i <= numIterations; i++) {
if (i % 15 == 0) {
result = 'Fizz Buzz';
}
else if (i % 5 == 0) {
result = 'Buzz';
}
else if (i % 3 == 0) {
result = 'Fizz';
}
else {
result = i ;
}
const rowElem = document.createElement('tr');
rowElem.innerHTML = `<td>${i} </td><td>${result}</td>`
tableElem.appendChild(rowElem);
}
}
window.addEventListener('load', run);
document.addEventListener('input', run);
</script>
</body>
</html>
Here is another fizz buzz example that is just JavaScript (no web page) and can be run using the node command shown below. Output from running this example is also shown.
// fizzbuzz.js
const numIterations = 40;
for (let i = 1; i <= numIterations; i++) {
if (i % 15 == 0) {
result = 'Fizz Buzz';
} else if (i % 5 == 0) {
result = 'Buzz';
} else if (i % 3 == 0) {
result = 'Fizz';
} else {
result = i;
}
const s = i.toString().padStart(2, ' ');
console.log(`${s} ${result}`);
}
