classList.add Как выбрать все элементы?

298
26 июня 2017, 17:49

Привет всем.

Как можно выбрать все 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]

Помогите разобраться...

Answer 1

Должно получится как-то так ?

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>

READ ALSO
Как можно такой placeholder создать на формах?

Как можно такой placeholder создать на формах?

Не могу создать такой инпут "placeholder" , то есть звездочка другим цветом в слова другим

194
unreachable code после return

unreachable code после return

При указании в form события onsubmit="ans();return false", var в скрипте принимает ошибку 'Unreachable code detected'

216
Матрица в DataGrid и SQLite WPF

Матрица в DataGrid и SQLite WPF

Имеется таблица в SQLite типа: строка столбец значение 1-------------1------------2 2-------------1------------5

294