Javascript to inject HTML with if statement

December 3, 2021

I’m trying to create a function that shows and hide a div through javascript injection. The function injects perfectly without the if (condition) like such: $("#video-container").load("include/video.html"); but fails to inject properly with the if statement. How does an if statement breaks something like this?

var show_video_feed_bool = false;
function show_video_feed() {
    if (show_video_feed_bool == false) {
        $("#video-container").load("include/video.html");
        show_video_feed_bool = true;
    }
    if (show_video_feed_bool) {
        document.getElementById("video-container").innerHTML = "";
        show_video_feed_bool = false;
    }
}

video.html

<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>
    var video = document.querySelector("#videoElement");

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                video.srcObject = stream;
            })
            .catch(function (err0r) {
                console.log("Something went wrong!");
            });
    }
</script>

>Solution :

Try:

show_video_feed_bool = false;
function show_video_feed() {
    if (!show_video_feed_bool) {
        $("#video-container").load("include/video.html");
    } else {
        document.getElementById("video-container").innerHTML = "";
    }
    show_video_feed_bool = !show_video_feed_bool;
}