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

Question

I'm trying to make a page which automatically loads a list of names and then is able to add text to the list. 我正在尝试制作一个页面，该页面会自动加载名称列表，然后能够在列表中添加文本。 I have an array which already contains a set of names minus one cell which is left to be undefined. 我有一个数组，其中已经包含一组名称减去一个单元格，该单元格尚未定义。 Then I have a function set up so that it looks for any undefined cells and sets that cell to equal what is typed into the text box. 然后，我设置了一个函数，以便它查找任何未定义的单元格并将该单元格设置为等于在文本框中键入的内容。 Since I am fairly new to coding, I am not exactly sure if there is something vital I am missing and/or I am doing something wrong. 由于我刚接触编码，因此我不确定是否缺少某些重要内容和/或做错了什么。

 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

The main reason why your browser is crashed is because you use workers.length in the loop and you increse the length with the push so this loop is never ends.. 为什么你的浏览器崩溃的主要原因是因为你用workers.length在循环中，你可适当增加与长度push使这个循环是永远不会结束..

You can just assign a variable to check if its replaced the undefined variable if he exists or if its doesn't to push after the loop. 您可以只分配一个变量，以检查它是否替换了未定义的变量（如果存在）或在循环后不推送。

<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

The main issue was in your putIn function. 主要问题在于您的putIn函数。 The app crashed because it was never going to exit the loop, since you are constantly adding to the array that is being looped over. 该应用程序崩溃是因为它永远不会退出循环，因为您一直在添加要循环的数组。

We can use a global flag to determine if the gap has been filled or not. 我们可以使用全局标志来确定是否已填补空白。 If it hasn't, we loop over the array and set the value at the correct index. 如果没有，我们遍历数组并将值设置在正确的索引处。 At this point we can set the flag to true and break out of the loop. 在这一点上，我们可以将标志设置为true ，并break了循环。 We have completed that update operation. 我们已经完成了该更新操作。 There's nothing else to add. 没有什么可添加的。

The subsequent times we call putIn , it will add the new items to the list, assuming they don't already exist. 在接下来的时间里，我们调用putIn ，它将把新项目添加到列表中， putIn它们尚不存在。 I added that bit of logic as I'd imagine that would be a desired restriction. 我添加了一些逻辑，因为我想这将是理想的限制。

Architecture improvements 架构改进

I have tidied things up and shown how to add new items to the list, if they don't already exist, and how to handle the case where you want to replace the undefined gap. 我整理了一些东西，并显示了如何将新项目添加到列表中（如果尚不存在）以及如何处理要替换undefined间隙的情况。

Nowadays, we bind our events in the JavaScript code rather than in the markup. 如今，我们将事件绑定在JavaScript代码中而不是在标记中。 This is particularly important when it comes to using templates. 在使用模板时，这一点尤其重要。

The basic idea in my solution is to always use the JavaScript array to drive the UI. 我的解决方案的基本思想是始终使用JavaScript数组来驱动UI。 We have the workers array, and we generate the markup from that. 我们有workers数组，并从中生成标记。 <ul> are the most appropriate tag for unordered lists. <ul>是最适合无序列表的标记。 We can then add <li> elements for the items, and append one for each value in the workers array. 然后，我们可以为项目添加<li>元素，并为workers数组中的每个值附加一个元素。

There's various optimisations you can apply here, but this is the basic idea. 您可以在此处应用各种优化，但这是基本思想。

 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

Architecture improvements 架构改进

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

问题描述

2 个解决方案

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

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

Architecture improvements 架构改进

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

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