Привет всем.
Как можно выбрать все classList.add?
Проблема в том что если наш DIV Дублируется то JS выдает ошибку.
Вот рабочий пример скрипта. https://jsfiddle.net/pkgzwct6/50/
<div id="test1">9</div>
<div id="test2">10</div>
<div id="test3">11</div>
<div id="test4">12</div>
<div id="test5">13</div>
<div id="test6">14</div>
<div id="test7">15</div>
<div id="test8">16</div>
<div id="test9">17</div>
<div id="test">test</div>
и сам JS.
const block1 = test1;
const block2 = test2;
const block3 = test3;
const block4 = test4;
const block5 = test5;
const block6 = test6;
const block7 = test7;
const block8 = test8;
const block9 = test9;
const block = test;
calculate_timeout = seconds => {
now = new Date(), next = new Date();
next.setSeconds(seconds);
if(next.getTime() <= now.getTime())
next.setMinutes(next.getMinutes()+1);
return next.getTime() - now.getTime();
}
(function timer_callback() {
let now = new Date;
if(now.getHours() >= 06 && now.getHours() < 09){
block.classList.add('now');
block9.classList.remove('now');
}
if(now.getHours() >= 09 && now.getHours() < 10){
block.classList.remove('now');
block1.classList.add('now');
}
if(now.getHours() >= 10 && now.getHours() < 11){
block1.classList.remove('now');
block2.classList.add('now');
}
if(now.getHours() >= 11 && now.getHours() < 12){
block2.classList.remove('now');
block3.classList.add('now');
}
if(now.getHours() >= 12 && now.getHours() < 13){
block3.classList.remove('now');
block4.classList.add('now');
}
if(now.getHours() >= 13 && now.getHours() < 14){
block5.classList.remove('now');
block6.classList.add('now');
}
if(now.getHours() >= 14 && now.getHours() < 15){
block6.classList.remove('now');
block7.classList.add('now');
}
if(now.getHours() >= 15 && now.getHours() < 16){
block7.classList.remove('now');
block8.classList.add('now');
}
if(now.getHours() >= 01 && now.getHours() < 23){
block8.classList.remove('now');
block9.classList.add('now');
}
})();
CSS.
#test.now{
background: green;
}
#test{
background: red;
}
#test1.now{background: green;}
#test1 {background: red;}
#test2.now{background: green;}
#test2 {background: red;}
#test3.now{background: green;}
#test3 {background: red;}
#test4.now{background: green;}
#test4 {background: red;}
#test5.now{background: green;}
#test5 {background: red;}
#test6.now{background: green;}
#test6 {background: red;}
#test7.now{background: green;}
#test7 {background: red;}
#test8.now{background: green;}
#test8 {background: red;}
#test9.now{background: green;}
#test9 {background: red;}
Если теперь добавим еще один элемент DIV
Пример
<div id="test9">17</div>
<div id="test9">17</div>
То сразу выдает ошибку JS. Вот ссылка На код с Ошибкой. [https://jsfiddle.net/pkgzwct6/51/][2]
Помогите разобраться...
Должно получится как-то так ?
const block1 = document.getElementsByClassName('test1')[0];
const block2 = document.getElementsByClassName('test2')[0];
const block3 = document.getElementsByClassName('test3')[0];
const block4 = document.getElementsByClassName('test4')[0];
const block5 = document.getElementsByClassName('test5')[0];
const block6 = document.getElementsByClassName('test6')[0];
const block7 = document.getElementsByClassName('test7')[0];
const block8 = document.getElementsByClassName('test8')[0];
const block9 = document.getElementsByClassName('test9');
const block = document.getElementsByClassName('test')[0];
calculate_timeout = seconds => {
now = new Date(), next = new Date();
next.setSeconds(seconds);
if (next.getTime() <= now.getTime())
next.setMinutes(next.getMinutes() + 1);
return next.getTime() - now.getTime();
}
(function timer_callback() {
let now = new Date;
if (now.getHours() >= 06 && now.getHours() < 09) {
block.classList.add('now');
block9.classList.remove('now');
}
if (now.getHours() >= 09 && now.getHours() < 10) {
block.classList.remove('now');
block1.classList.add('now');
}
if (now.getHours() >= 10 && now.getHours() < 11) {
block1.classList.remove('now');
block2.classList.add('now');
}
if (now.getHours() >= 11 && now.getHours() < 12) {
block2.classList.remove('now');
block3.classList.add('now');
}
if (now.getHours() >= 12 && now.getHours() < 13) {
block3.classList.remove('now');
block4.classList.add('now');
}
if (now.getHours() >= 13 && now.getHours() < 14) {
block5.classList.remove('now');
block6.classList.add('now');
}
if (now.getHours() >= 14 && now.getHours() < 15) {
block6.classList.remove('now');
block7.classList.add('now');
}
if (now.getHours() >= 15 && now.getHours() < 16) {
block7.classList.remove('now');
block8.classList.add('now');
}
if (now.getHours() >= 01 && now.getHours() < 23) {
block8.classList.remove('now');
for(var i = 0; i < block9.length; i++){
block9[i].classList.add('now');
}
}
})();
.test.now {
background: green;
}
.test {
background: red;
}
.test1.now {
background: green;
}
.test1 {
background: red;
}
.test2.now {
background: green;
}
.test2 {
background: red;
}
.test3.now {
background: green;
}
.test3 {
background: red;
}
.test4.now {
background: green;
}
.test4 {
background: red;
}
.test5.now {
background: green;
}
.test5 {
background: red;
}
.test6.now {
background: green;
}
.test6 {
background: red;
}
.test7.now {
background: green;
}
.test7 {
background: red;
}
.test8.now {
background: green;
}
.test8 {
background: red;
}
.test9.now {
background: green;
}
.test9 {
background: red;
}
<div class="test1">9</div>
<div class="test2">10</div>
<div class="test3">11</div>
<div class="test4">12</div>
<div class="test5">13</div>
<div class="test6">14</div>
<div class="test7">15</div>
<div class="test8">16</div>
<div class="test9">17</div>
<div class="test9">17</div>
<div class="test">test</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Не могу создать такой инпут "placeholder" , то есть звездочка другим цветом в слова другим
При указании в form события onsubmit="ans();return false", var в скрипте принимает ошибку 'Unreachable code detected'
Имеется таблица в SQLite типа: строка столбец значение 1-------------1------------2 2-------------1------------5