Блог

Главная - Вопросы по программированию - документ.querySelectorAll не работает

документ.querySelectorAll не работает

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я только начал изучать javascript и проверил пример с веб-сайта https://cssanimation.rocks/clocks /. Но, к сожалению, одна часть в js script не работает. Код выглядит следующим образом:

 /*
 * Starts any clocks using the user's local time
 * From: cssanimation.rocks/clocks
*/ 
 (function() {
  // Initialise the locale-enabled clocks
  //initInternationalClocks();
  // Initialise any local time clocks
  initLocalClocks();
  // Start the seconds container moving
  //moveSecondHands();
  // Set the intial minute hand container transition, and then each subsequent step
  //setUpMinuteHands();
})();
 function initLocalClocks() {
   //get the local time using javascript
   var date = new Date();
   var seconds = date.getSeconds();
   var minutes = date.getMinutes();
   var hours = date.getHours();
  
   var hands = [
     {
       hand: "hours",
       angle: (hours * 30)   (minutes/2)
     },
     {
       hand: "minutes",
       angle: (minutes * 6)
     },
     {
       hand: "seconds",
       angle: (seconds * 6)
     },
   ];

   for (var j = 0; j < hands.length; j  ){
         
     var elements = document.querySelectorAll('.'   hands[j].hand);

      // window.alert(elements.length);
       
    
    for (var k = 0; k < elements.length; k  )
        {
      // window.alert(elements[k]);
       elements[k].style.webkitTransform = 'rotateZ('   hands[j].angle   'deg)';
          
    
       elements[k].style.transform = 'rotateZ('   hands[j].angle   'deg)';
       if (hands[j].hand === 'minutes'){
         elements[k].parentNode.setAttribute('data-second-angle', hands[j 1].angle)
       }
    }
   }
 }


// Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that

function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6)   0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}  
 .footer{
	color: black;
	font-style: italic;
	position: fixed; bottom: 0; left:0; right: 0; height: 30px;
	float: left;
	clear: both;
}

.clock {
  border-radius: 50%;
  background: #fff url(./images/ios_clock.svg) no-repeat center;
  background-size: 88%;
  height: 20em;
  padding-bottom: 0%;
  position: relative;
  width: 20em;
}

.clock::after{
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

.seconds {
  background: #000;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 100%;
  width: 1%;
  z-index: 8;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

.hours-container{
  animation: rotate 43200s infinite linear;
}

.minutes-container{
  animation: rotate 3600s infinite linear;
}

.seconds-container {
  animation: rotate 60s infinite linear;
}  
 <!DOCTYPE html>

<html>


<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="script.js" ></script>
</head>

<body>

<article class="clock">
  <div class="hours-container">
    <div class="hours"></div>
  </div>

  <div class="minutes-container">
    <div class="minutes"></div>
  </div>

  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</article>

</body>

<footer>
<div class="footer">All materials are taken from the website <a href = "https://cssanimation.rocks/clocks/" target="_blank">cssanimation.rocks</a>
</div>
</footer>

</html>

И когда я открываю страницу, javascript выполняется, но массив «элементы» из строки: var elements = document .querySelectorAll(‘.’ hands[j].hand) пуст. Я проверил через окна оповещений, и действительно, querySelectorAll не возвращает объекты, но имя класса css кажется правильным… Я пробовал то же самое в консоли (например: document.querySelectorAll(‘.hands’), и он возвращает необходимый div… Не могли бы вы, пожалуйста, помочь мне — что с этим может быть не так ?…

PS Когда я вставил фрагмент в это сообщение, скрипт js, похоже, работает… Теперь я полностью потерян — это что-то с настройками моего браузера или что-то в этом роде?

Заранее большое вам спасибо за любые предложения / помощь!

Комментарии:

1. Ваш JavaScript оценивается до того, как тело документа будет проанализировано и встроено в DOM. Следовательно, запрос ничего не возвращает. Переместите <script> тег в самый конец <body> .

2. Вы также можете применить defer атрибут к тегу вашего скрипта, например <script type="text/javascript" src="script.js" defer></script>

3. большое спасибо, теперь это работает! Большое вам спасибо! Я просто переместил его в конец, и все в порядке!