How to create a button on the second page?

Question

    <html>
        <head>
            <title>The greatest MMO you will ever play</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <script>
                function buyStuffWithPoints()
                {
                 var points=prompt("How many points have you earned?");
                 document.write("<p>Buy your items now and prepare for battle! Choose wisely.<p>" );
                 document.write("<p><img src = 'sword.jpg'/><p>");
                 document.write("<p><img src = 'Waterskin.jpg' /><p>");
                 document.write("<p><img src = 'charm.jpg' /><p>");
                 document.write("<p><img src = 'Phone.jpg' /><p>");

                }           

            </script>

            <input type="button" onclick="buyStuffWithPoints()" value="Start!" />
            <div>
           <input type="button" onclick="buyStuffWithPoints()" value="Buy Sword(2500)!" />
            </div>
        </body>
    </html>

So currently what happens is when I run it, it prompts me to enter amount of points, then it shows two buttons, "Start!" and "Buy Sword(2500)!". Then after clicking start, the next page shows 4 pictures of the items to buy.

What I want to happen is, after I enter the amount of points, I only want it to show the "Start!" button. Then on the NEXT page, the same page where the pictures show up, I want to show the "Buy Sword" button.

I understand why it's doing this, I just have no idea how to change it. Can anyone help me with this?

You [really shouldn't use `document.write`](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). Other than that, it might be easier to do this all on one page once you get proper DOM manipulation down. — Mike Cluck, Jan 22 '16 at 22:21

R.Costa · Accepted Answer · 2016-01-22T22:44:23.223

You must close your p tags and you should avoid document.write

<html>
    <head>
        <title>The greatest MMO you will ever play</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <script>
            function buyStuffWithPoints() {

                var points = prompt("How many points have you earned?");

                var html = "<p>Buy your items now and prepare for battle! Choose wisely.</p>"
                        + "<p><img src = 'sword.jpg'/></p>"
                        + "<div><input type=\"button\" onclick=\"buyStuffWithPoints()\" value=\"Buy Sword(2500)!\" /></div>"
                        + "<p><img src = 'Waterskin.jpg' /></p>"
                        + "<p><img src = 'charm.jpg' /></p>"
                        + "<p><img src = 'Phone.jpg' /></p>"

                document.body.innerHTML = html;
            }
        </script>

        <input type="button" onclick="buyStuffWithPoints()" value="Start!" />
    </body>
</html>

Thanks. So far the professor's only used document.write so I wasn't aware it was bad, or even that there are other ways. — Jetridder11, Jan 22 '16 at 22:49
No problem. You can check Mike's link to read more about it. If you're happy with the answer, don't forget to click on the check mark :) — R.Costa, Jan 22 '16 at 22:54

How to create a button on the second page?

1 Answers1