CODEWITHSUNDEEP
javascript
user3038615
user3038615

Reputation: 1

My table has an extra cell

I have a table and there is a extra blank cell that appears on top of the table. You enter a name and the name inserts into the table and there's a counter on top that counts how many names there are. Could someone look at my code and tell me how to fix it.

var userNames = [];


function getName() {
    //Variables
    var input;
    var userName;
    //Initializes input
    input = document.getElementById("nameInput");
    //Reads input
    userName = input.value;
    //Assigns userName
    userNames[userNames.length] = userName;
    //Clears the input
    input.value = "";
    input.focus();
}


function printTotal() {
    //Constants
    var LABEL = "Total: ";
    //Variables
    var total;
    var output;
    //Initializes output
    output = document.getElementById("totalOutput");
    //Gets number
    total = userNames.length;
    //Output
    output.innerHTML = LABEL + total;
}


function printNames() {
    //Constants
    var OPEN_CELL = "<tr style=\"height : 1.5eM;\"><td>";
    var CLOSE_CELL = "</tr></td>";
    var ONE = 1;
    //Varialbles
    var output;
    var index;

    output = document.getElementById("nameOutput");

    index = userNames.length - ONE;

    output.innerHTML += OPEN_CELL + userNames[index] + CLOSE_CELL;
}

function project62Part2() {
    // Your code goes in here.
    getName();
    printTotal();
    printNames();
    return false;
}

HTML file code

<div id="outputDiv" class="output">
<form action="#" onsubmit="return project62Part2();">
    <label for="nameInput" style="float : left;">Name:</label>
    <input type="text" id="nameInput" style="float : left;" />
    <input type="submit" value="submit" style="float : left; clear : left" />
    <!--<p id="totalOutput">
    </p>-->
    <table id="nameOutput">
        <tr>
            <th id="totalOutput">
                Total: 0
            </th>
        </tr>
    </table>
</div>

<script type="text/javascript">project62Part2();</script>

Upvotes: 0

Views: 65

Answers (4)

Brian S
Brian S

Reputation: 5056

In addition to the extraneous call to project62Part2(), I recommend considering DOM manipulation rather than straight strings and playing with innerHTML. For example:

function printNames() {
  var output = document.getElementById("nameOutput");

  var tr = document.createElement('tr');
  tr.style.height = '1.5em';
  var td = document.createElement('td');
  var content = document.createTextNode(userNames[userNames.length - 1]);

  td.appendChild(content);
  tr.appendChild(td);
  output.tBodies[0].appendChild(tr);
}

Upvotes: 0

GregL
GregL

Reputation: 38131

As Paul commented, the answer is that the initial call to project62Part2() runs that function, which calls getName(), which gets an empty value for the input, and adds that to the array.

You only need to call the function on form submit.

See this jsFiddle for proof.

Upvotes: 1

Sajad Deyargaroo
Sajad Deyargaroo

Reputation: 1149

Markup of CLOSE_CELL is not correct. You should have the end tag of cell first, followed by end tag of the row.

var OPEN_CELL = "<tr style=\"height : 1.5eM;\"><td>";
var CLOSE_CELL = "</td></tr>";

Upvotes: 0

S McCrohan
S McCrohan

Reputation: 6693

You run Project62Part2() at page-load. Your use of userNames[userNames.length] is actually correct, because you're adding a new item at the tail of a 0-based array. However, your initial execution of getName, while the input is empty, is inserting an empty string into userNames[0].

I suggest some basic validation:

if (userName != "") 
userNames[userNames.length] = userName;

You probably don't want to insert blanks anyway, yes?

Upvotes: 1

Related Questions