堆栈内存溢出
  简体   繁体   English

当我似乎找不到任何错误时，此代码为什么不起作用？

[英]How come this code isn't working when I can't seem to find anything wrong?

 原文  2019-04-08 18:19:41  9   3    javascript/ html5/ css3

问题描述

Html and CSS work fine but for some reason, the JS won't work correctly. HTML和CSS可以正常工作，但是由于某种原因，JS无法正常工作。 It seems to give a syntax error of uncaught TypeError: Cannot read property 'getTotalLength' of null and it won't give me the length. 它似乎给出了一个未捕获的TypeError语法错误：无法读取null的属性“ getTotalLength”，并且不会给出长度。 I am following a tutorial from devEd. 我正在关注devEd的教程。 outline.style.strokedasharray is also not working. outline.style.strokedasharray也不起作用。 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 个解决方案

解决方案1
 2  2019-04-08 18:34:34

I think you can use DOMContentLoaded event. 我认为您可以使用DOMContentLoaded事件。 Somthing like this: 像这样的东西： 

document.addEventListener("DOMContentLoaded", () => {
//your code (your function)
});

But the reason has been already described above. 但是原因已经在上面描述了。

解决方案2
 1 已采纳  2019-04-08 18:25:12

Move your entire <script> block to the bottom. 将整个<script>块移到底部。

outline is null because when you are doing const outline = document.querySelector(".moving-outline circle"); outline为null，因为执行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. 类.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

you need to let the html document load first. 您需要先加载html文档。 using jQuery's $(document).ready() function is really helpful for this. 使用jQuery的$（document）.ready（）函数对此很有帮助。

jQuery .ready() documentation jQuery .ready（）文档

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么这个jQuery脚本不起作用？ 我什么都看不到 - 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? 设置间隔（）； 不工作。 我正在尝试倒计时到 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 似乎无法弄清楚该脚本为何不起作用 - Can't seem to figure out why the script isn't working 为什么在Node.js中找不到模块？ - How come I can't find a module in nodejs? 为什么&#39;in&#39;关键字无法在数组中找到元素？ - How come the 'in' keyword isn't able to find an element in my array? 我怎么猜JavaScript中的数字游戏不起作用？ - How come my guess the number game in JavaScript isn't working? 轨道图像滑块插件为何不起作用？ - How come orbit image slider plugin isn't working?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM