如何调用具有相同变量的按钮点击函数？“已解”

Question

在HTML中，我创建了4个按钮。一个使视频速度更慢(x0.5)，另一个使其正常速度(x1.0)，另一个使其速度更快(x2.0)，最后一个使其速度非常快(x8.0)。我做了正确的按钮，所有的工作，它应该如何工作，但问题是，当我尝试应用这些按钮到另一个视频，按钮将只工作在第二个视频，而不做任何事情对第一个视频。当我删除第二个视频时，按钮将恢复正常工作在第一个视频。我检查了控制台，没有发现错误。

我的HTML代码

null

                <h3>First video</h3>
                <video id="vfirst" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" height="339" width="600"></video>
                <p>Video speed</p>
                <div class="sps">
                    <button class="bs" onclick="Bs()" type="button">×0.5</button>
                    <button class="bn" onclick="Bn()" type="button">×1.0</button>
                    <button class="bf" onclick="Bf()" type="button">×2.0</button>
                    <button class="bvf" onclick="Bvf()" type="button">×8.0</button>
                </div>
                <h3>Second video</h3>
                <video id="vsec" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" height="339" width="600"></video>
                <p>Video speed</p>
                <div class="sps">
                    <button class="bs" onclick="Bs2()" type="button">×0.5</button>
                    <button class="bn" onclick="Bn2()" type="button">×1.0</button>
                    <button class="bf" onclick="Bf2()" type="button">×2.0</button>
                    <button class="bvf" onclick="Bvf2()" type="button">×8.0</button>
                </div>
                
                            <script>
                var vid = document.getElementById("vfirst");
                    function Bs() {
                        vid.playbackRate = 0.5;
                    }
                    function Bn() {
                        vid.playbackRate = 1;
                    }
                    function Bf() {
                        vid.playbackRate = 2;
                    }
                    function Bvf() {
                        vid.playbackRate = 8;
                    }
                var vid = document.getElementById("vsec");
                    function Bs2() {
                        vid.playbackRate = 0.5;
                    }
                    function Bn2() {
                        vid.playbackRate = 1;
                    }
                    function Bf2() {
                        vid.playbackRate = 2;
                    }
                    function Bvf2() {
                        vid.playbackRate = 8;
                    }
            </script>

null

这里是相同的代码，但删除了第二个视频。看它工作得很好。

null

                    <h3>First video</h3>
                    <video id="vfirst" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" height="339" width="600"></video>
                    <p>Video speed</p>
                    <div class="sps">
                        <button class="bs" onclick="Bs()" type="button">×0.5</button>
                        <button class="bn" onclick="Bn()" type="button">×1.0</button>
                        <button class="bf" onclick="Bf()" type="button">×2.0</button>
                        <button class="bvf" onclick="Bvf()" type="button">×8.0</button>
                    </div>
                    
                                <script>
                    var vid = document.getElementById("vfirst");
                        function Bs() {
                            vid.playbackRate = 0.5;
                        }
                        function Bn() {
                            vid.playbackRate = 1;
                        }
                        function Bf() {
                            vid.playbackRate = 2;
                        }
                        function Bvf() {
                            vid.playbackRate = 8;
                        }
                </script>

null

有什么想法吗？

Answer 1

您需要将变量名vid更改为vid1用于第一个视频，将vid2用于第二个视频。在标记中使用下面的代码。

var vid1 = document.getElementById("vfirst");
function Bs() {
    vid1.playbackRate = 0.5;
}
function Bn() {
    vid1.playbackRate = 1;
}
function Bf() {
    vid1.playbackRate = 2;
}
function Bvf() {
    vid1.playbackRate = 8;
}
var vid2 = document.getElementById("vsec");
function Bs2() {
    vid2.playbackRate = 0.5;
}
function Bn2() {
    vid2.playbackRate = 1;
}
function Bf2() {
    vid2.playbackRate = 2;
}
function Bvf2() {
    vid2.playbackRate = 8;
}