How come this code isn't working when I can't seem to find anything wrong?
Question
Html and CSS work fine but for some reason, the JS won't work correctly. It seems to give a syntax error of uncaught TypeError: Cannot read property 'getTotalLength' of null and it won't give me the length. I am following a tutorial from devEd. outline.style.strokedasharray is also not working. I really need a solution, thanks!
<!DOCTYPE html> <html> <head> <title>Meditation App</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script> const app = () => { const song = document.querySelector(".song"); const play = document.querySelector(".play"); const outline = document.querySelector(".moving-outline circle"); const video = document.querySelector(".vid-container video"); //Sounds const sounds = document.querySelectorAll(".sound-picker button"); //Time Display const timeDisplay = document.querySelector(".time-display"); //Get length of the outside const outlineLength = outline.getTotalLength(); //Duration let fakeDuration = 600; outline.style.strokeDasharray = 100; }; app(); </script> <style> *{ margin:0; padding:0; box-sizing:border-box; } .app{ height:100vh; display:flex; justify-content:space-evenly; align-items:center; } .time-select,.sound-picker,.player-container{ height:80%; flex:1; display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; } .player-container{ position:relative; } .player-container svg{ position:absolute; height:50%; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; } .time-display{ position:absolute; bottom:10%; color:white; font-size:50px; } video{ position:fixed; top:0%; left:0%; width:100%; z-index:-10; } .time-select button, .sound-picker button{ color:white; width:30%; height:10%; background:none; border:2px solid white; cursor:pointer; border-radius:5px; font-size:20px; transition:all 0.5s ease; } .time-select button:hover{ color:black; background:white; } .sound-picker button{ border:none; height:120px; width:120px; border-radius:50%; } .sound-picker button:nth-child(1){ background:#4972a1; } .sound-picker button:nth-child(2){ background:#a14f49; } </style> </head> <body> <div class="app"> <div class="vid-container"> <video Loop> <source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/> </video> </div> <div class="time-select"> <button data-time="120">2 Minutes</button> <button data-time="300">5 Minutes</button> <button data-time="600">10 Minutes</button> </div> <div class="player-container"> <audio class="song"> <source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"/> </audio> <svg class="play" width="90" height="90" viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/> </svg> <svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/> </svg> <svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/> </svg> <h3 class="time-display">0:00</h3> </div> <div class="sound-picker"> <button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button> <button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1" data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"</button> </div> </body> </html>
3 answers
solution1
2 2019-04-08 18:34:34
I think you can use DOMContentLoaded event. Somthing like this:
document.addEventListener("DOMContentLoaded", () => {
//your code (your function)
});
But the reason has been already described above.
solution2
1 ACCPTED 2019-04-08 18:25:12
Move your entire <script> block to the bottom.
outline is null because when you are doing const outline = document.querySelector(".moving-outline circle"); the DOM element with class .moving-outline doesn't exist yet, so outline is null, thus being unable to call a method from it.
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"/>
</audio>
<svg class="play"
width="90" height="90" viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
</svg>
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"</button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = 100;
};
app();
</script>
</html>
solution3
0 2019-04-08 18:25:49
you need to let the html document load first. using jQuery's $(document).ready() function is really helpful for this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why isn't this jQuery script working? I can't see anything wrong
Geolocation not working at all, can't find a solution don't think there is anything wrong with my code
I can't find anything wrong regarding my code, but the script still doesn't work
How come this image preload isn't working?
setInterval(); not working. I am trying to get my countdown to go down but it gets stuck and I can't seem to find whats wrong with it
Can't seem to figure out why the script isn't working
How come I can't find a module in nodejs?
How come the 'in' keyword isn't able to find an element in my array?
How come my guess the number game in JavaScript isn't working?
How come orbit image slider plugin isn't working?
Related Tags