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

Question

我正在尝试制作一个页面，该页面会自动加载名称列表，然后能够在列表中添加文本。 我有一个数组，其中已经包含一组名称减去一个单元格，该单元格尚未定义。 然后，我设置了一个函数，以便它查找任何未定义的单元格并将该单元格设置为等于在文本框中键入的内容。 由于我刚接触编码，因此我不确定是否缺少某些重要内容和/或做错了什么。

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

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

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 ，它将把新项目添加到列表中， 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 个解决方案

解决方案1
2 2017-01-29 01:09:18

解决方案2
1 2017-01-29 01:10:45

架构改进

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

问题描述

2 个解决方案

解决方案1 2 2017-01-29 01:09:18

解决方案2 1 2017-01-29 01:10:45

架构改进

解决方案1
2 2017-01-29 01:09:18

解决方案2
1 2017-01-29 01:10:45