queryselector for all does not select the specified css selectory [closed]
+0
−4
Closed as not constructive by Alexei on Jan 11, 2023 at 08:50
This question cannot be answered in a way that is helpful to anyone. It's not possible to learn something from possible answers, except for the solution for the specific problem of the asker.
This question was closed; new answers can no longer be added. Users with the reopen privilege may vote to reopen this question if it has been improved or closed incorrectly.
I tried using query selector but it does not work heres my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hour-hand"></div>
<div class="min-hand"></div>
<div class="second-hand"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Heres my css code:
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.second-hand{
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin:100% ;
border-radius: 20px;
transition: all 0.5s;
transform: rotate(90deg);
}
Heres my .js file:
const secondHand=document.querySelector('.second-hand');
function setDate(){
const now= new Date();
const seconds=now.getSeconds;
const secDEG=6*seconds;
secondHand.style.transform =`rotate(${secDEG}deg)`;
const minutes=now.getMinutes;
const hours=now.getHours;
}
setInterval(setDate, 1000);
The problem is that the secondHand returns null and the element doesnt get selected.
0 answers
3 comment threads