My button keeps disappearing in my 99 bottles of beer on the wall program

Question

Hey I really don't under stand why my button keeps disappearing on me, I should also mention that I haven't done any javascript in like 2 months so I may be a little rusty.

<html>
<head></head>
<body>
    <script language = "JavaScript">
    function Count(){
        var x = "98";
        x--;
        var y = document.write(x + "<p> Bottles of beer on the wall </p>" + x + "<p> bottles of beer You take one down pass it around</p>" + x-- + "<p> of beer on the wall!</p>");
        document.getElementById('text').innerHTML = y;
    }
    </script>

    <form>
        <input type="button" value="Count" onClick="Count()">
    </form>
    <p id="text">99 Bottles of beer on the wall 99 Bottles of beer you take one down pass it around 98 bottles of beer on the wall!</p>
</body>
</html>

Also, as to why it is overwriting the body: https://developer.mozilla.org/en-US/docs/Web/API/document.write?redirectlocale=en-US&redirectslug=DOM%2Fdocument.write#Notes — Mike Cheel, Dec 11 '13 at 03:43

score 2 · Answer 1 · edited May 23 '17 at 10:33

2

Remove document.write which is override the body

var y = x + "<p> Bottles of beer on the wall </p>" + x + 
            "<p> bottles of beer You take one down pass it around</p>" + x-- + 
            "<p> of beer on the wall!</p>";
document.getElementById('text').innerHTML = y;

Here in this answer you can find What actually document.write does?

edited May 23 '17 at 10:33

Community

1
1

answered Dec 11 '13 at 03:38

Praveen

55,303
33
133
164

score 0 · Answer 2 · answered Dec 11 '13 at 03:38

It's because document.write() overwrites your body. use this instead:

var y = (x + "<p> Bottles of beer on the wall </p>" + x + "<p> bottles of beer You take one down pass it around</p>" + x-- + "<p> of beer on the wall!</p>");
document.getElementById('text').innerHTML = y;

score 0 · Answer 3 · answered Dec 11 '13 at 03:40

The main thin is to not use document.write() in this case. That actually writes to the browser. Try this:

<html>
<head></head>
<body>
    <script language = "JavaScript">
    var x = "98";
    function Count(){
        next = x - 1;
        var y = x + " bottles of beer on the wall " + x + " bottles of beer You take one down pass it     around " + next + " of beer on the wall!";
        document.getElementById('text').innerHTML = y;
        x--;
        return false;
    }
    </script>

    <form action="#" method="post">
        <input type="button" value="Count" onClick="Count()">
    </form>
    <p id="text">99 Bottles of beer on the wall 99 Bottles of beer you take one down pass it around 98     bottles of beer on the wall!</p>
</body>
</html>

You also had some issues with the way you were decrementing x.

So I copied your code but removed x--; because it would decrease it twice and that would cause problems and now when I click on the button nothing happens ? — , Dec 11 '13 at 03:51

My button keeps disappearing in my 99 bottles of beer on the wall program

3 Answers3