if not working for .innerHTML in Javascript

Question

I have typed the following code in Javascript which just hides and shows a div with a youtube video on it. :

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%;
}

However, only 'hideVideo2()' and showVideo2() works, and determineShowHideVid() does not. I was trying to get innerHTML so that if it says Play, the video shows. if not, the video hides.

The thing is, Button element PlayerDetermine changes it's text content to close and shows the video, but does not hide it back.

Is there something wrong with my IF statement in javascript?

The comparison operator in JavaScript is `==` … – CBroe Aug 15 '14 at 03:55 — CBroe, Aug 15 '14 at 03:55
`innerHTML.match(/Play/)` – monkeyinsight Aug 15 '14 at 03:55 — monkeyinsight, Aug 15 '14 at 03:55

score 2 · Accepted Answer · answered Aug 15 '14 at 03:55

2

add == operator to compare remove .match from your if to make it like:

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

answered Aug 15 '14 at 03:55

Sudhir Bastakoti

99,167
15
158
162

score 1 · Answer 2 · edited May 23 '17 at 12:20

1

you should try this

full credits to https://stackoverflow.com/users/142410/vian-esterhuizen

Check if YouTube video is playing and run script

its the most cleanest way I think you can detect if the embedded youtube video is playing or not so you can make accurate DOM changes on you html

edited May 23 '17 at 12:20

Community

1
1

answered Aug 15 '14 at 03:56

Netorica

18,523
17
73
108

if not working for .innerHTML in Javascript

2 Answers2