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代码不会加载页面

回答

相关问题