如何解决“script.js”不起作用的问题

Question

Basically one of my scripts work but the other one doesn't. I am trying to customize the play button functions with javascript but whenever I try to load the script it seems like the script has no effect on the video.

I have checked the code itself and even went back to the index.html to see if I made any errors with the tags. I also found out after inspecting the script is not there but it's declared in the index.html.

 index.html





    <div class="container">


    <div class="c-video">
                        <video class="video" src="stranding.mp4"></video>
                        <div class="controls">
                                <div class="orange-bar"></div>
                                    <div class="orange-juice"></div>

                    <div class="buttons">
                        <button id="play-pause"></button></div>

                   </div>

                </div>
            </div>

            <script src="script.js"></script>
            <script src="alert.js"></script>



________________________________________________________________________
        var video = document.querySelector("video");
        var juice = document.querySelector("orange-juice");
        var btn = document.getElementById("play-pause");




        function togglePlayPause() {
            if(video.paused){
                btn.className = "pause";
                video.play();

         } else {

            btn.className = "play";
            video.pause();
         } 
        }

        btn.onclick = funtion() {
            togglePlayPause();
        };


    ________________________________________________________
    stye.css 

    .buttons button.play:before {
        content: "\fo4b";
    }

    .buttons button.pause:before {
        content: "\f04c";
    }

    .orange-bar{
        height: 10px;
        top: 0;
        left: 0;
        width: 100%;
    }

    .orange-juice{
        height: 10px;
        background-color: silver;
    }

I want the script to cause the video to play/pause but it doesn't.

Answer 1

You are incorrectly taking the reference of the Play/Pause button. Instead of:

document.getElementById(".play-pause");

use

document.getElementById("play-pause");

Answer 2

You are using the " . " class selector in document.getElementsById

var btn = document.getElementById(".play-pause");

Without seeing the HTML and knowing exactly what is going on, try

var btn = document.getElementById("play-pause");