如果在Javascript中不能为.innerhtml工作

if not working for .innerHTML in Javascript

本文关键字:innerhtml 工作 不能 Javascript 如果      更新时间:2023-09-26

我在Javascript中输入了以下代码,它只是隐藏并显示了一个带有youtube视频的div。:

Javascript:

function showVideo2()
{
    document.getElementById("TheVid").style.opacity = 1;
}
function hideVideo2()
{
    document.getElementById("TheVid").style.opacity = 0;
}
function determineShowHideVid()
    {
        if (document.getElementById("PlayerDetermine").innerHTML.match ="Play")
        {
            showVideo2();
            document.getElementById("PlayerDetermine").innerHTML = "Close";
        }
        else
        {
            hideVideo2();
            document.getElementById("PlayerDetermine").innerHTML = "Play";
        }
    }
HTML

<body>
    <div class='container'>
        <div class='row' id= 'BodyDiv1' name = 'BodyDiv'>
            <button type='submit' onclick='determineShowHideVid()' id='PlayerDetermine'>Play</button>
            <button type='submit' onclick='showVideo2()'>Play</button>
            <button type='submit' onclick='hideVideo2()'>x</button>
            <div class='col-md-8' id='TheVid'>
                <div class="vid">
                    <iframe class="youtube-player" type="text/html" width="430" height="150" 
src="//www.youtube.com/embed/jx83rMjic5w?wmode=opaque?html5=1" allowfullscreen frameborder="0">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</body>
CSS

#TheVid { 
   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;
}
.vid {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.vid iframe,
.vid object,
.vid embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

但是,只有'hideVideo2()'showVideo2()工作,而determineShowHideVid()不工作。我试着让innerHTML,这样如果它说播放,视频就会播放。如果没有,视频就隐藏起来。

问题是,Button元素playerdecide改变它的文本内容来关闭并显示视频,但不隐藏它。

在javascript中我的IF语句有问题吗?

add == operator比较从您的if中删除.match,使其像:

...
if (document.getElementById("PlayerDetermine").innerHTML == "Play") {
...

你应该试试这个

完全归功于https://stackoverflow.com/users/142410/vian-esterhuizen

检查是否正在播放YouTube视频并运行脚本

是最干净的方式,我认为你可以检测嵌入的youtube视频是否正在播放,所以你可以对你的html

进行准确的DOM更改