"墙上的99瓶啤酒"代码不工作纯js。 if语句和while循环

时间:2014-09-06 09:44:09

标签: javascript if-statement while-loop

嗨,我已经制作了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/

5 个答案:

答案 0 :(得分:2)

您的代码充满了错误。

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

如需进一步阅读,请参阅Chrome DevTools Overview。 Chrome Dev工具远远优于Firefox / IE /(IMHO)

Chrome Developer tools


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

&#13;
&#13;
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.";
&#13;
<div style="text-align: center;">
     <h1>99 Bottles of Beer Song</h1>

    <div id="output"></div>
&#13;
&#13;
&#13;


答案 1 :(得分:1)

存在语法错误 - 以及逻辑错误:

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

答案 2 :(得分:1)

开始条件

  • 我们从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';
}

答案 3 :(得分:0)

你错过了一些括号

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/

答案 4 :(得分:0)

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个变量:numbottlesbottlesWillChange。在第二步中,我们使用条件为num > 0的while循环。主要部分:如果num === 2,我们将值BottlesWillChange更改为“ bottle”,因为在我们的歌曲的一部分中,当bottle等于2时,在此字符串的最后一部分中,我们应使用“ bottle”。接下来,如果if语句仅在我们的num === 1时起作用,则将bottle变量的第一和第二个值更改为“ bottle”,因为它是单个变量,而bottlesWillChange变量值则更改为“ bottles”。