如果不适用于 Javascript 中的 .innerHTML答案

【问题标题】：if not working for .innerHTML in Javascript如果不适用于 Javascript 中的 .innerHTML
【发布时间】：2014-08-15 13:24:43
【问题描述】：

我在 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 元素 PlayerDetermine 将其文本内容更改为关闭并显示视频，但不会将其隐藏。

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

【问题讨论】：

JavaScript 中的比较运算符是== ...
innerHTML.match(/Play/)

标签： javascript html css opacity

【解决方案1】：

添加 == 运算符以比较从您的 if 中删除 .match 使其类似于：

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

【讨论】：

【解决方案2】：

你应该试试这个

全部归功于https://*.com/users/142410/vian-esterhuizen

Check if YouTube video is playing and run script

这是我认为您可以检测嵌入的 youtube 视频是否正在播放的最干净的方法，这样您就可以对您的 html 进行准确的 DOM 更改

【讨论】：