Question

我有一张桌子，桌子顶部还有一个额外的空白单元格。您输入一个名称，并在表格中插入名称，顶部有一个计数器，用于计算有多少名称。有人可以查看我的代码并告诉我如何解决它。

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文件代码

<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>

Answer 1

您在页面加载时运行Project62Part2（）。您对userNames [userNames.length]的使用实际上是正确的，因为您在基于0的数组的尾部添加了一个新项。但是，当输入为空时，初始执行getName会将空字符串插入userNames [0]。

我建议进行一些基本验证：

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

你可能不想插入空白，是吗？

Answer 2

正如Paul所评论的那样，答案是对project62Part2()的初始调用会运行该函数，该函数调用getName()，它为输入获取一个空值，并将其添加到数组中。

您只需要在表单提交上调用该函数。

请参阅this jsFiddle以获取证明。

Answer 3

CLOSE_CELL的标记不正确。您应首先使用单元格的结束标记，然后是行的结束标记。

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

Answer 4

除了对project62Part2()的无关调用之外，我建议考虑使用DOM操作而不是直接字符串并使用innerHTML。例如：

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);
}

我的桌子有一个额外的单元格

4 个答案: