Внешний javascript для складного меню, не работающего на веб-сайте

#javascript #html

#язык JavaScript #HTML

Вопрос:

Итак, в принципе, у меня есть некоторый javascript, который я (буквально) вырвал непосредственно из w3.

Это должно быть интерактивное меню, которое открывается и отображает флажки, однако на самом деле оно не открывается при загрузке веб-страницы. Это прекрасно работает в их собственном редакторе, и кислород не выдает мне никаких ошибок, так что я немного растерян.

Ниже приведен фрагмент моего HTML-кода.

 lt;bodygt;  lt;h1gt;Titlelt;/h1gt;  lt;button type="button" class="collapsible"gt;Content Headerlt;/buttongt;  lt;div class="content"gt;  lt;label class="container"gt;Contentlt;input type="checkbox" checked="checked" /gt;  lt;span class="checkmark"gt;lt;/spangt;lt;br /gt;  lt;/labelgt;  lt;/divgt; lt;/bodygt;

а вот javascript для складного меню (который не работает)

 var coll = document.getElementsByClassName("collapsible"); var i;  for (i = 0; i lt; coll.length; i  ) {  coll[i].addEventListener("click", function() {  this.classList.toggle("active");  var content = this.nextElementSibling;  if (content.style.display === "block") {  content.style.display = "none";  } else {  content.style.display = "block";  }  }); }

1. Вы добавили lt;scriptgt; тег, который связывает ваш внешний файл js? Если да, то либо поместите его внизу, либо просто добавьте defer к нему. Кроме того, попробуйте добавить несколько console.log() s, чтобы убедиться, что файл действительно правильно связан, и посмотреть, сохраняется ли в coll нем что-либо .

2. Это сработало! Очень признателен. Я связывал исходный сценарий в голове (как и всегда), и по какой-то причине размещение его внизу сработало.

Ответ №1:

Поместил в нижней части документа внутри тегов, он начал волшебным образом работать. Спасибо @aerial301

Ответ №2:

Я также не вижу проблемы в вашем коде javascript.
Вы пытались обернуть свой код в document.onload(function) событие?
Пример:

 lt;scriptgt;  document.onload(() =gt; {  // your javascript code here.  }) lt;/scriptgt;

1. Кислород выдает ошибку, когда я пытаюсь поместить ее в HTML, я попытался заставить ее, и основной домен также выдает ошибку, она не очень хорошо сформирована. Я также попытался использовать lt; вместо