當我似乎找不到任何錯誤時，此代碼為什么不起作用？
[英]How come this code isn't working when I can't seem to find anything wrong?
問題描述
HTML和CSS可以正常工作，但是由於某種原因，JS無法正常工作。 它似乎給出了一個未捕獲的TypeError語法錯誤：無法讀取null的屬性“ getTotalLength”，並且不會給出長度。 我正在關注devEd的教程。 outline.style.strokedasharray也不起作用。 我真的需要一個解決方案，謝謝！
<!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 個解決方案
解決方案1
2 2019-04-08 18:34:34
我認為您可以使用DOMContentLoaded事件。 像這樣的東西：
document.addEventListener("DOMContentLoaded", () => {
//your code (your function)
});
但是原因已經在上面描述了。
解決方案2
1 已采納 2019-04-08 18:25:12
將整個<script>塊移到底部。
outline為null，因為執行const outline = document.querySelector(".moving-outline circle"); 類.moving-outline的DOM元素尚不存在，因此outline為null，因此無法從中調用方法。
<!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>
解決方案3
0 2019-04-08 18:25:49
您需要先加載html文檔。 使用jQuery的$（document）.ready（）函數對此很有幫助。
地理位置根本不起作用，找不到解決方案，不要認為我的代碼有什么問題
[英]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
設置間隔（）； 不工作。 我正在嘗試倒計時到 go，但它卡住了，我似乎找不到它有什么問題
[英]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
為什么'in'關鍵字無法在數組中找到元素？
[英]How come the 'in' keyword isn't able to find an element in my array?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.