Using Javascript prompts to dynamically create table (not working)

Question

This is what I have so far but it doesn't even prompt the user, it shows a thin black line (which I think is the border)

<html>
    <head>
        <meta charset = "utf-8">
        <title>Dynamically creating a table</title>
    </head>     
    <body>
        <table style = "width:100%" cellspacing="5" border="2">
        <script type = "text/javascript">
            var running = true; //boolean to determine if we should continue running
            while(running) {
                var i = 0;
                var input; //variable that holds the input values   
                input = window.prompt("Please enter your product number then quantity sold, seperated by a comma. Hit Enter when you are done.");
                var split;
                var num1;
                var num2;
                if(input != "") {
                    split = input.split(',');
                    num1 = split[0];
                    num2 = 0;
                    if(split.length > 1) {
                        num2 = split[1].trim();
                    }
                }

                switch(num1) {
                    case 1:
                        // unimportant calculations
                        break;
                    case 2:
                        // unimportant calculations
                        break;
                    default:
                        document.writeln("<tr>");
                        document.writeln("<td>text</td>");
                        document.writeln("<td>text</td>");
                        document.writeln("</tr>");
                        document.writeln("<tr>");
                        document.writeln("<td>text1</td>");
                        document.writeln("<td>text2</td>");
                        document.writeln("<td>text3</td>");
                        document.writeln("</tr>");
                        running = false;
                }
            }
        </script>
        </table>
    </body>
</html>

I tried including it in both the head and body, I also tried declaring the table tag in the script and outside the script.

This is a syntax error: var input[i]; - execution of your script would stop at that line. If you open your browser's dev console and refresh the page you should see an error message about it. Also your switch statement has incorrect syntax (and once you fix the switch syntax you're probably going to want to add some break statements for each case). — nnnnnn
– nnnnnn, Commented Jun 6, 2015 at 23:44
Even at that, it will only work once, logic needs some brandishing. — Olatunde Garuba
– Olatunde Garuba, Commented Jun 6, 2015 at 23:55

Braulio Soncco · Accepted Answer · 2015-06-08 02:23:45Z

1

You have some errors in your code, for example:

<table style = "width:100%" cellspacing="5" border="2">

You can not put html code like table inside head, you need to write this on body.

var input[i]; //variable that holds the input values

You can not define variables containing a key. The correct way is:

var input = [];

Other

switch(num1):
  // ... code

The correct way is:

switch(num1) {
  //  ... code
}

You can check your html errors using a html validator and if you are using a modern browser like Firefox or Chrome, you can access to javascript errors pressing f12.

edited Jun 8, 2015 at 2:23

answered Jun 6, 2015 at 23:51

Braulio Soncco

3531 gold badge4 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jackie Jones Over a year ago

Thanks, this helped me along with the above post. I have updated my code and it is running now. However, it spits out a table right after the first input.

Jackie Jones Over a year ago

I was also wondering, is there a way to step through the script step by step in the browser as well?

Braulio Soncco Over a year ago

you can add the line debugger; after a line, this works if you have your developer tools enabled (with F12 key)

Jolu Mij · Accepted Answer · 2015-06-06 23:56:10Z

1

Your code has several javascript errors. Try this one to start with:

<html>
    <head>
        <meta charset = "utf-8">
        <title>Dynamically creating a table</title>
        <table style = "width:100%" cellspacing="5" border="2">
        <script type = "text/javascript">
            var running = true; //boolean to determine if we should continue running
            while (running) {
                var input = window.prompt("Please enter your two numbers seperated by a comma.");
                var split = input.split(',');
                var num1= split[0];
                var num2= input[1];

                switch(num1) {
                    case '1':
                        document.writeln("<tr>");
                        document.writeln("<td>text</td>");
                        document.writeln("<td>text</td>");
                        document.writeln("</tr>");
                    case '2':
                        document.writeln("<tr>");
                        document.writeln("<td>text1</td>");
                        document.writeln("<td>text2</td>");
                        document.writeln("<td>text3</td>");
                        document.writeln("</tr>");
                    case '99':
                        running = false;
                    }
            }
        </script>
        </table>
    </head>     
    <body>
    </body>
</html>

answered Jun 6, 2015 at 23:56

Jolu Mij

112 bronze badges

1 Comment

Jackie Jones Over a year ago

Thanks, this helped me with a number of things, I have my code running now and it accepts inputs but it spits out the table right after the first input. I updated the original post with the cleaned out code.

Collectives™ on Stack Overflow

Using Javascript prompts to dynamically create table (not working)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related