While, Do While, For, InnerHTML Create a page innerLoop.html on your Neocities a
ID: 3766511 • Letter: W
Question
While, Do While, For, InnerHTML
Create a page innerLoop.html on your Neocities account. Use the source code from here:
http://cs202.neocities.org/innerLoop.html to get you started.
Problem 1: Create a button and function, whileBottles that prompts the user for an integer. Using a while loop and innerHTML (NOT ALERTS), output all verses of the song "99 Bottles of Beer on the wall". Except instead of starting at 99, start at whatever number the user enters. Remember that there is a grammatical change when there is only one bottle left. (Use an if statement to catch it).
Problem 2: Create a button and function, forBottles, that does the same thing as problem 1, but use a for loopinstead.
Problem 3: Create a button and function, doBottles, that does the same thing as problem 1 but use a do while loopinstead.
Problem 4: Create a button and function whileBadger that prints the numbers from 1 to 100. But for multiples of three, print "Badger" instead of the number and for multiples of five print "Mushroom". For numbers which are multiples of both three and five print "SNAKE!". Output to your page using innerHTML. Use a while loop to do this.
Sample output:
1
2
Badger
4
Mushroom
Badger
7
8
Badger
Mushroom
11
Badger
13
14
SNAKE!
Problem 5: Create a button and function forBadger that does the same thing as problem 4, but uses a for loop instead.
Problem 6: Create a button and function doBadger that does the same thing as problem 4, but uses a do while loop instead.
Please help me in my homework.
Explanation / Answer
PROBLEM 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Badger Badger Starter</title>
<script>
//runs a specified number of times
function badgerBadger(){
var number = parseInt(prompt("Enter a number"));
var i = number;
var output1 = " bottles of beer on the wall, ";
var output2 = " bottles of beer.";
var output3 = "Take one down and pass it around, ";
var output = "";
while(i > 1){
output = output + i + output1 + i + output2 + "<br>" + output3 + (i-1) + output1 + "<br>";
i = i - 1;
}
// For 1 bottle and no more bottles
output = output + "1 bottle of beer on the wall, 1 bottle of beer." + "<br>" + "Take one down and pass it around, no more bottles of beer on the wall." + "<br>" + "No more bottles of beer on the wall, no more bottles of beer." + "<br>" + "Go to the store and buy some more, 99 bottles of beer on the wall.";
document.getElementById("outputArea").innerHTML = output;
}
</script>
</head>
<body>
<p>
<button>Badger</button>
</p>
<p id = "outputArea"></p>
</body>
</html>
PROBLEM 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Problem 2</title>
<script>
//runs a specified number of times
function forBottles(){
var number = parseInt(prompt("Enter a number"));
var completeOutput = "";
var i = 0;
var output1 = " bottles of beer on the wall, ";
var output2 = " bottles of beer.";
var output3 = "Take one down and pass it around, ";
for (i = number; i > 1; i--) {
completeOutput = completeOutput + i + output1 + i + output2 + "<br>" + output3 + (i-1) + output1 + "<br>";
}
// For 1 bottle and no more bottles
completeOutput = completeOutput + "1 bottle of beer on the wall, 1 bottle of beer." + "<br>" + "Take one down and pass it around, no more bottles of beer on the wall." + "<br>" + "No more bottles of beer on the wall, no more bottles of beer." + "<br>" + "Go to the store and buy some more, 99 bottles of beer on the wall.";
document.getElementById("outputArea").innerHTML = completeOutput;
}
</script>
</head>
<body>
<p>
<button>Click Me!</button>
</p>
<p id = "outputArea"></p>
</body>
</html>
PROBLEM 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Problem 3</title>
<script>
//runs a specified number of times
function doBottles(){
var number = parseInt(prompt("Enter a number"));
var completeOutput = "";
var output1 = " bottles of beer on the wall, ";
var output2 = " bottles of beer.";
var output3 = "Take one down and pass it around, ";
do {
completeOutput = completeOutput + number + output1 + number + output2 + "<br>" + output3 + (number-1) + output1 + "<br>";
number = number - 1;
} while(number > 0);
// For 1 bottle and no more bottles
completeOutput = completeOutput + "1 bottle of beer on the wall, 1 bottle of beer." + "<br>" + "Take one down and pass it around, no more bottles of beer on the wall." + "<br>" + "No more bottles of beer on the wall, no more bottles of beer." + "<br>" + "Go to the store and buy some more, 99 bottles of beer on the wall.";
document.getElementById("outputArea").innerHTML = completeOutput;
}
</script>
</head>
<body>
<p>
<button>Click Me!</button>
</p>
<p id = "outputArea"></p>
</body>
</html>
PROBLEM 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Problem 4</title>
<script>
//runs a specified number of times
function whileBadger(){
var i = 1;
var output = "";
var holder = ""
while(i <= 100){
if (i%3 == 0 && i%5 == 0) {
holder = "SNAKE!";
}
else if (i%3 == 0) {
holder = "Badger";
}
else if (i%5 == 0) {
holder = "Mushroom";
}
else {
holder = i;
}
output = output + holder + "<br>";
i = i + 1;
}
document.getElementById("outputArea").innerHTML = output;
}
</script>
</head>
<body>
<p>
<button>Badger</button>
</p>
<p id = "outputArea"></p>
</body>
</html>
PROBLEM 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Problem 5</title>
<script>
//runs a specified number of times
function forBadger(){
var i = 1;
var output = "";
var holder = "";
for (i = 1; i <= 100; i++) {
if (i%3 == 0 && i%5 == 0) {
holder = "SNAKE!";
}
else if (i%3 == 0) {
holder = "Badger";
}
else if (i%5 == 0) {
holder = "Mushroom";
}
else {
holder = i;
}
output = output + holder + "<br>";
}
document.getElementById("outputArea").innerHTML = output;
}
</script>
</head>
<body>
<p>
<button>Badger</button>
</p>
<p id = "outputArea"></p>
</body>
</html>
PROBLEM 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Problem 4</title>
<script>
//runs a specified number of times
function doBadger(){
var i = 1;
var output = "";
var holder = ""
do{
if (i%3 == 0 && i%5 == 0) {
holder = "SNAKE!";
}
else if (i%3 == 0) {
holder = "Badger";
}
else if (i%5 == 0) {
holder = "Mushroom";
}
else {
holder = i;
}
output = output + holder + "<br>";
i = i + 1;
} while(i <= 100);
document.getElementById("outputArea").innerHTML = output;
}
</script>
</head>
<body>
<p>
<button>Badger</button>
</p>
<p id = "outputArea"></p>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.