Javascript代碼不會加載頁面

我有這個javascript代碼的小問題，當我在列表中添加更多的網站時，頁面無法加載。我必須添加200多個網站。Javascript代碼不會加載頁面

我是帶javascript的noob。有人可以解釋什麼是問題，什麼

我做錯了？

<script language="JavaScript" type="text/javascript"> 
var a = new Array(
'notiziepericolose.blogspot.it', 
'ilcorrieredellanotte.it',          
'ilmattoquotidiano.it', 
'ilfattonequotidiano.com', 
'rebubblica.altervista.org', 
'coriere.net' 

); 
var aa = a.slice(); 
aa.sort(); 
document.write("<ol>"); 
document.write("<b>"); 
for (i = 0; i < a.length; i=i+1) { 
document.write('<li id="demo'+i+'">'+a[i]+'</li>'); 
} 
document.write("</b>"); 
document.write("</ol>"); 
</script>

來源

2017-08-05 Fasbyte01

什麼是你的錯誤？ – sheplu

首先，你的循環中的變量i是未定義的。 – Adriani6

ids應該是唯一的btw – Roecrew

我想第一件事document.write現在很少使用，因爲有一個更好和更有效的方式添加東西（元素，文本等）到DOM（稍後更多）。此外，在你的情況下，你不知道的是document.write是不是像echo或println;每次使用它都會清除文檔，這可能是您看不到任何內容的原因。換句話說，多個document.write的結果是不累積。

第二件事情是，有更好的方式來標記元素，而不是使用id s，特別是如果頁面上有很多這樣的元素，就像你擁有的那樣。再次，現在有更好的方法來定位元素，或者比十年或十五年前更容易捕捉事件。

所以，讓我們來談談你的代碼。

您可以使用方括號[]快速創建一個數組。

var arr = [ 
    'notiziepericolose.blogspot.it', 
    'ilcorrieredellanotte.it', 
    'ilmattoquotidiano.it', 
    'ilfattonequotidiano.com', 
    'rebubblica.altervista.org', 
    'coriere.net' 
];

您不必創建陣列，以便副本sort - 它可以就地完成：

arr.sort();

我要保持你的循環，但告訴你將字符串連接在一起的另一種方式。有些人更喜歡將字符串添加到一起，但我更喜歡這種方式，那就是創建一個字符串的小部分數組，然後將它們放在一起**。

// Set l as the length, and create an output array called list 
for (var i = 0, l = arr.length, list = []; i < l; i++) { 

    // I've changed things here. I've added a class called item 
    // but also changed the element id to a data-id instead 
    var li = ['<li class="item" data-id="', i, '">', arr[i], '</li>']; 

    // Push the joined li array of strings into list 
    list.push(li.join('')); 
}

假設你有所謂的「主」您的頁面上的元素：

HTML

<div id="main"></div>

您可以添加列表陣列作爲HTML字符串到main使用方法：

var main = document.getElementById('main'); 

// Note that I've given the ordered list an id called list 
var HTML = ['<ol id="list"><b>', list.join(''), '</b></ol>'].join(''); 
main.insertAdjacentHTML('beforeend', html);

好的，這很容易。但我敢打賭，你問的是如何針對列表中的單個項目，以便如果我點擊其中的一個，它會警告它是什麼（或什麼）。

而不是添加事件偵聽器以每個列表項（其中我們可以，但它可以工作performatively昂貴你有更多的項目），我們要重視一個到我們補充說list ID的ol元素從項目和捕獲的事件，因爲他們冒泡：

var ol = document.getElementById('list');

然後一個事件偵聽器添加到它告訴我們什麼功能（checkItem）的列表時，點擊事件引發被稱爲：

ol.addEventListener('click', checkItem);

我們的函數使用事件（e）來查明事件的目標是什麼（點擊了哪個項目），並提醒其文本內容。

function checkItem(e) { 
    alert(e.target.textContent); 
}

你可以看到這一切工作in this demo。希望這有些幫助。

**下面是整理的另一種方式，並通過使用reduce數組循環：

var list = arr.sort().reduce(function (p, c, i) { 
    return p.concat(['<li class="item" data-id="', i, '">', c, '</li>']); 
}, []).join('');

DEMO

來源

2017-08-05 23:23:13 Andy

如果您使用的是數組，則可以使用forEach而不是循環。

var domUpdate = ''; 
 
var websites = ['notiziepericolose.blogspot.it','ilcorrieredellanotte.it','ilmattoquotidiano.it','ilfattonequotidiano.com','rebubblica.altervista.org','coriere.net']; 
 

 
websites.forEach(function(website, index){ 
 
    domUpdate += '<li id="website-' + (index + 1) + '"><b>' + website + '</b></li>'; 
 
}); 
 

 
document.getElementById('hook').innerHTML = '<ol>' + domUpdate + '</ol>';

<div id="hook"></div>

來源

2017-08-05 22:11:26 Win

如果ES6是可能的，你可以做到這一點是這樣的：

var a = new Array(
 
'notiziepericolose.blogspot.it', 
 
'ilcorrieredellanotte.it',          
 
'ilmattoquotidiano.it', 
 
'ilfattonequotidiano.com', 
 
'rebubblica.altervista.org', 
 
'coriere.net'); 
 

 
var aa = a.slice(); 
 
var mL = document.getElementById('mylist'); 
 
aa.sort().map(el => { 
 
\t \t var li = document.createElement("li"); 
 
\t \t var b = document.createElement("b"); 
 
\t \t var t = document.createTextNode(el); 
 
       b.appendChild(t); 
 
       li.appendChild(b); 
 
\t \t mL.appendChild(li); 
 
});

<ol id="mylist"></ol>

來源

2017-08-05 22:13:23 n3wb

我想文件撰寫是錯誤的因爲它似乎在清理文件。 https://developer.mozilla.org/en-US/docs/Web/API/Document/write也許你想通過document.getElementById或類似的東西綁定新的內容到現有的html

來源

2017-08-05 22:17:56 piisexactly3

Javascript代碼不會加載頁面

回答

相關問題