當我將值推入數組並嘗試重新打印值時，頁面崩潰

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