Question

我试图创建一个自动加载名称列表的页面，然后能够将文本添加到列表中。我有一个数组已经包含一组名称减去一个单元格，这个单元格未定义。然后我设置了一个函数，以便查找任何未定义的单元格并将该单元格设置为与文本框中键入的内容相同。由于我对编码很新，我不确定是否有重要的事情我缺少和/或我做错了什么。

＆＃13;

var workers = ["Bob", "Bill"];
workers[3] = "Jill";
var i;
var text = "";

function lister() {
    for (i = 0; i < workers.length; i++) {
        text += workers[i] + "<br>";
    }
    document.getElementById('list').innerHTML = text;
}

function putIn(x) {
    for (i = 0; i < workers.length; i++) {
        if (typeof workers[i] == 'undefined') {
            workers[i] === x;
        } else {
            workers.push(x);
        }
    }

    lister();
    document.getElementById('list').innerHTML = text;
}

＆＃13;

<body onload="lister()">
    <p id="list"></p>
    <input id = "addContent" type = "text" placeholder = "Name">
    <button id="submitIn" value = "Submit" onclick="putIn(addContent.value)">Submit</button>  
</body>

＆＃13;

Answer 1

您的浏览器崩溃的主要原因是您在循环中使用workers.length并使用push增加长度，因此此循环永远不会结束..

你可以只分配一个变量来检查它是否替换了未定义的变量（如果它存在）或者它是否在循环之后不被推送。

<script>
var workers = ["Bob","Bill"];
workers[3]= "Jill";
var i;
var text= "";
function lister(){
    text = ""; // here you need to reset the text so its won't just add them to the old ones..
    for (i=0 ; i < workers.length ; i++ ) {
        text +=  workers[i] + "<br>";
    } 
    document.getElementById('list').innerHTML=text;
}

function putIn(x){
    var isReplaced = 0;
    for(i=0;i<workers.length;i++){
        if (workers[i] == null){
            workers[i] = x;
            isReplaced = 1;
        }
    }

    if(!isReplaced) {
        workers.push(x);
    }

    lister();
}

</script>

Answer 2

主要问题出在您的putIn函数中。该应用程序崩溃，因为它永远不会退出循环，因为你不断添加到循环的数组。

我们可以使用全局标志来确定是否填补了差距。如果没有，我们遍历数组并将值设置为正确的索引。此时，我们可以将标志设置为循环中的true和break。我们已完成更新操作。没有什么可以补充的。

随后我们调用putIn，它会将新项目添加到列表中，假设它们尚不存在。我添加了一些逻辑，因为我认为这将是一个理想的限制。

架构改进

我已经整理了一些内容并展示了如何将新项目添加到列表中（如果它们尚不存在），以及如何处理要替换undefined间隙的情况。

如今，我们将事件绑定在JavaScript代码中而不是标记中。在使用模板时，这一点尤其重要。

我的解决方案的基本思想是始终使用JavaScript数组来驱动UI。我们有workers数组，我们从中生成标记。 <ul>是无序列表最合适的标记。然后，我们可以为项添加<li>元素，并为workers数组中的每个值附加一个元素。

您可以在此处应用各种优化，但这是基本想法。

var list = document.getElementById("list");
var submit = document.getElementById("submit");
var content = document.getElementById("content");
var filledInGap = false;
var workers = ["Bob", "Bill"];
workers[3] = "Jill";

document.addEventListener("DOMContentLoaded", bindList, false);

submit.addEventListener("click", function() {
    putIn(content.value);
    bindList();
});

function bindList() {
    list.innerHTML = "";

    for (var i = 0; i < workers.length; i++) {
        var item = document.createElement("li");
        item.innerHTML = workers[i];
        list.appendChild(item);
    }
}

function putIn(value) {
    if (!filledInGap) {
        for (var i = 0; i < workers.length; i++) {
            if (typeof(workers[i]) === "undefined") {
                workers[i] = value;
                filledInGap = true;
                break;
            }
        }
    } else if (workers.indexOf(value) === -1) {
        workers.push(value);
    }
}

ul { 
    list-style-type: none; 
    padding-left: 0;
}

<ul id="list"></ul>

<input id="content" type="text" placeholder="Name">
<button id="submit" value="Submit">Submit</button>

当我将值推入数组并尝试重新打印值时，我的页面崩溃了

2 个答案:

架构改进