CODEWITHSUNDEEP
javascripthtmlhtml-table
Jackie Jones
Jackie Jones

Reputation: 120

Using Javascript prompts to dynamically create table (not working)

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.

Upvotes: 0

Views: 657

Answers (2)

Braulio Soncco
Braulio Soncco

Reputation: 353

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.

Upvotes: 1

Jolu Mij
Jolu Mij

Reputation: 11

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>

Upvotes: 1

Related Questions