“墙上有 99 瓶啤酒”代码无法使用纯 js。 if 语句和 while 循环

Question

您好，我制作了一首 99 瓶啤酒歌曲，但我的代码似乎无法正常工作，我不确定，我无法弄清楚。我真的需要一些帮助来看看我哪里出错了，或者需要一些帮助来显示我哪里出错了。我想要 if 语句或者是否有不同的方法可以做到这一点，但我需要设置它是如何的，我不确定如何修复它，请帮忙。 提前致谢。

这是我的 JavaScript。

var bottles = 99
bottle = "bottles";
text = "";

var output = document.getElementById('output');
while (bottles > 0) {

    if (bottles == 1) {
    bottle = "bottle";
    text = "<p>" + bottles + " " + bottle + " of beer on the wall, " + bottles + " " + bottle + " of beer. <br/>";
    bottles--;

        output.innerHTML += text;
    }

    if (bottles == 0) {
    bottles = "no more";
    text += "Take one down and pass it around, " + bottles + " bottles of beer on the wall. </p>"

    output.innerHTML += text;
}

output.innerHTML += "<p> 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.</p>"

这是我的 HTML。

<title>My Title</title>
<script src="javascript.js"></script>
<div style="text-align: center;">
 <h1>99 Bottles of Beer Song</h1>

<div id="output"></div>

我也有一把小提琴。 http://jsfiddle.net/Matt1990/1wg16qr5/46/

Answer 1

您的代码充满了错误。

要调试 JavaScript 等客户端代码，您可以通过按 CTRL + SHIFT + i 使用 Chrome/Firefox 中的开发人员工具。它显示了类似于变量声明部分的语法错误。

如需进一步阅读，请参阅Chrome DevTools Overview。 Chrome 开发工具比 Firefox/IE/whatever 好得多（恕我直言）

---

这是工作代码。请自行比较。

var bottles = 99,
    bottle = "bottles",
    text = "",
    output = document.getElementById('output');
while (bottles > 0) {
    if (bottles == 1) {
        bottle = "bottle";
    }

    text += bottles + " ";
    text += bottle + " of beer on the wall, ";
    text += bottles + " " + bottle + " of beer.<br>";
    
    bottles--;
    text += "Take one down and pass it around, ";
    text += + bottles + " bottles of beer on the wall.<hr>"

    if (bottles == 0) {
        bottles = "no more";
    }
    output.innerHTML += text;
  text = '';
}

output.innerHTML += " No more bottles of beer on the wall, no more bottles of beer.  Go to the store and buy some more, 99 bottles of beer on the wall.";

<div style="text-align: center;">
     <h1>99 Bottles of Beer Song</h1>

    <div id="output"></div>

---

Answer 2

起始条件

• 我们从 99 瓶开始
• 由于99和98都是复数，所以本轮和下轮都设置为复数

迭代

每次我们开始新一轮时，我们都需要检查当前（和下一个）num 是复数还是单数

停止案例

while 循环将一直运行到num = 0。我们有两种特殊情况：

• num === 1：这一轮是单数，下一轮应该是no bottles of juice
• num === 0：这一轮是no bottles of juice，下一轮应该像原曲一样完成Go to the store and buy some more, 99 bottles of juice on the wall.的歌曲。

singBottles(15, 'juice');

function singBottles(givenNum, drinkType) {
  let num = givenNum;

  while (num >= 0) {
    const bottlesFirstLine = num === 0 ?
      `no more bottles` :
      `${ num } ${ getPluralState(num) }`;

    const bottlesSecondLine = num - 1 > 0 ?
      `${ num - 1 } ${ getPluralState(num - 1) }` :
      `no more bottles`;

    const firstLine = `${ bottlesFirstLine } of ${ drinkType } on the wall! ${ bottlesFirstLine } of ${ drinkType }!`;

    const secondLine = num - 1 >= 0 ? `Take one down, pass it around... ${ bottlesSecondLine } of ${ drinkType } on the wall!` :
      `Go to the store and buy some more, ${ givenNum } ${ getPluralState(givenNum) } of ${ drinkType } on the wall.`;

    console.log(`${ firstLine }\n${ secondLine }\n`);

    num--;
  }
}

function getPluralState(num) {
  return num === 1 ? 'bottle' : 'bottles';
}

Answer 3

存在语法错误和逻辑错误：

var bottles = 99
bottle = "bottles";
text = "";

var output = document.getElementById('output');
while (bottles >= 0) {

    if (bottles == 1) {
         bottle = "bottle";
    }

    // for all > 0
    text = "<p>" + bottles + " " + bottle + " of beer on the wall, " + bottles + 
                           " " + bottle + " of beer. <br/>";

    bottles--;

    if (bottles == 0) {
        bottles = "no more";
        text += "Take one down and pass it around, " + 
                    bottles + " bottles of beer on the wall. </p>"; // ; missing
    } // } missing

    output.innerHTML += text; // needs to be done always!

}

output.innerHTML += "<p> 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.</p>"

Fiddle here

Answer 4

你漏掉了一些括号

var bottles = 99; //You need to declare each var like this var x = "x"; var y = "y"
var bottle = "bottles"; // or you can declare it like this var x = "x", y ="y"
var text = "";

var output = document.getElementById('output');
while (bottles > 0) {

    if (bottles == 1) {
    bottle = "bottle";
    }//Missed Parenthesis
    text = "<p>" + bottles + " " + bottle + " of beer on the wall, " + bottles + " " + bottle + " of beer. <br/>";




    if (bottles == 0) {
    bottles = "no more";
    text += "Take one down and pass it around, " + bottles + " bottles of beer on the wall. </p>"
    }
    bottles--;//The decreasment is always at the end
    output.innerHTML += text;
}//Missed parenthesis

output.innerHTML += "<p> 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.</p>"

http://jsfiddle.net/1wg16qr5/49/

Answer 5

var num = 99;
var bottles = " bottles";
var bottlesWillChange = " bottles"

while (num > 0) {

    if (num === 2) { bottlesWillChange = " bottle"; }
    if (num === 1) { bottles = " bottle"; bottlesWillChange = " bottles"; }

    console.log(num + bottles + " of juice on the wall! " + num + bottles + " of juice! Take one down, pass it around... " + (num - 1) + bottlesWillChange +" of juice on the wall!")

    num--
}

解释：首先我们创建 3 个变量：num、bottles、bottlesWillChange。在第二步中，我们使用条件为num > 0 的while 循环。主要部分：如果num === 2，我们将值bottleWillChange 更改为“bottle”，因为在我们歌曲的一部分中当bottles 等于2 时，在该字符串的最后一部分我们应该使用“bottle”。下一个 if 语句只有在我们的 num === 1 时才有效，我们将瓶子变量的第一个和第二个值更改为“bottle”，因为它是单一的，而 bottlesWillChange 变量值更改为“bottles”。