Javascript код не загружает страницу

1

У меня небольшая проблема с этим кодом javascript, когда я добавляю больше места в список, страница не загружается. Я должен добавить более 200 сайтов.

Я ноб с javascript. Может кто-нибудь объяснить, в чем проблема, что

Я поступаю неправильно?

 <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>
  • 1
    в чем твоя ошибка?
  • 1
    Прежде всего, переменная i в вашем цикле не определена.
Показать ещё 2 комментария
Теги:

4 ответа

0
Лучший ответ

Я предполагаю, что первое, что document.write очень редко используется сейчас, поскольку есть более эффективные способы добавления вещей (элементов, текста и т.д.) В DOM (подробнее об этом позже). Кроме того, в вашем случае вы не понимаете, что document.write не похож на echo или println; каждый раз, когда он используется, он очищает документ, поэтому, вероятно, вы ничего не видите. Другими словами, результаты множественного document.write не являются кумулятивными.

Во-вторых, есть лучшие способы "маркировки" элементов, чем с id, особенно если их много на странице, как и у вас. Опять же, в настоящее время существует гораздо более эффективный способ нацеливания элементов или нахождение событий, чем было десять или пятнадцать лет назад.

Итак, расскажите о своем коде.

Вы можете быстро создать массив, используя скобки [].

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

Вам не нужно создавать копию массива для sort - это можно сделать на месте:

arr.sort();

Я собираюсь сохранить ваш цикл, но покажу вам другой способ объединения строк. Некоторые люди предпочитают добавлять строки вместе, но я предпочитаю этот путь, и это для создания массива небольших частей вашей строки, а затем join() их вместе **.

// 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(''));
}

Предполагая, что у вас есть элемент на вашей странице под названием "main":

HTML

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

JS

Вы можете добавить массив списка как строку HTML в main с помощью метода [ insertAdjacentHTML ]:

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

Хорошо, так что довольно легко. Но я уверен, вы спрашиваете, как вы можете настроить таргетинг на отдельные элементы в списке, чтобы, если я нажму на один из них, он предупредит, что это (или что-то).

Вместо добавления прослушивателя событий к каждому элементу списка (который мы могли бы, но он мог бы работать, дороже, чем больше элементов, которые у вас есть), мы собираемся присоединить его к элементу ol мы добавили этот идентификатор list и поймали события из когда они пузырятся:

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

Затем в список добавляется прослушиватель событий, который сообщает нам, какая функция (checkItem) вызывается при создании события клика:

ol.addEventListener('click', checkItem);

Наша функция использует событие (e), чтобы узнать, какова цель события (какой элемент был нажат), и предупреждает его текстовое содержимое.

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

Вы можете увидеть все это, работая в этой демонстрации. Надеюсь, что некоторые из них были полезны.

** Здесь другой способ сортировки и циклический переход через массив с помощью reduce:

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

DEMO

Поделиться
0

если 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 => {
		var li = document.createElement("li");
		var b  = document.createElement("b");
		var t  = document.createTextNode(el);
                b.appendChild(t);
                li.appendChild(b); 
		mL.appendChild(li);
});
<ol id="mylist"></ol>
Поделиться
0

Я думаю, что document.write - неправильный выбор здесь, поскольку, похоже, это очистка документа. https://developer.mozilla.org/en-US/docs/Web/API/Document/write Возможно, вы хотите связать новый контент с существующим html через document.getElementById или что-то в этом роде

Поделиться
0

Если вы используете массив, вы можете использовать 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню