Как я могу получить Javascript для изменения класса в статье Joomla 3 из внешнего файла JS?

Как мне заставить Javascript изменить класс в статье Joomla 3 из внешнего файла js?

У меня есть сайт Joomla 3.9x, использующий Bootstrap 4x. Есть крошечный кусочек javascript, который отлично работает на своих местах. Похоже, что сегодняшняя дата находится между двумя указанными датами. Если это так, то один класс применяется к именованному div, если нет, то другой класс применяется к этому div.

Поскольку я не хочу, чтобы статьи Joomla содержали скрипт, я пытаюсь вызвать скрипт из файла user.js. Этот файл уже существует и содержит другой JavaScript, который работает нормально, поэтому в этом файле нет ничего плохого.

Что мне не хватает, так это правильный синтаксис для загрузки всего html перед запуском скрипта.

Вот упрощенная HTML-страница со встроенным кодом, и она работает, как и ожидалось, если я изменю даты:

  {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="October"{amp}gt;Next Concert{amp}lt;/div{amp}gt; {amp}lt;script type="text/javascript"{amp}gt;var today = new Date(); var future = new Date(2019, 11, 16); var past = new Date(2019, 7, 18); if ((today {amp}lt; future) {amp}amp;{amp}amp; (today {amp}gt; past)) document.getElementById("October").className = "next"; else document.getElementById("October").className = "d-none";{amp}lt;/script{amp}gt; {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Вот одна из версий того, что я пробовал в файле user.js:

 window.onload=function() { var octoberconcert = document.getElementById("October"); var today = new Date(); var future = new Date(2019, 11, 16); var past = new Date(2019, 11, 18); if ((today {amp}lt; future) {amp}amp;{amp}amp; (today {amp}gt; past)) octoberconcert.className = "next"; else octoberconcert.className = "d-none"; } 

и это:

 document.addEventListener("DOMContentLoaded", function(event) { var octoberconcert = document.getElementById("October"); var today = new Date(); var future = new Date(2019, 11, 16); var past = new Date(2019, 11, 18); if ((today {amp}lt; future) {amp}amp;{amp}amp; (today {amp}gt; past)) octoberconcert.className = "next"; else octoberconcert.className = "d-none"; }); 

используя другую обертку, которая была предложена другим запросом здесь, но не повезло.

и это:

 var october = document.getElementById("October"), var today = new Date(), var future = new Date(2019, 11, 16), var past = new Date(2019, 11, 18); window.onload = function(){octoberConcert()}; function octoberConcert() { if ((today {amp}lt; future) {amp}amp;{amp}amp; (today {amp}gt; past)) { october.className = "next"; } else { october.className = "d-none"; } } 

Во всех трех случаях классы не добавляются в div.

Кажется, не имеет значения, если переменные разделены запятыми или точками с запятой.

Благодарю.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector