0

I am beginner in web developing, so I was practicing to edit size of video by buttons. Inside of js script, I declared global variable var myVideo = document.getElementById("Video1"); and tried to use it further in functions like:

function Enlarge(){
    myVideo.width=1060;
    myVideo.height=720;
}

and it didn't work. However when I used separately document.getElementById("Video1") in each functions:

function Enlarge(){
    document.getElementById("Video1").width = 1060;
    document.getElementById("Video1").height = 720;
}

, it worked. I tried to do same with "" quotes like "1060" and also by myVideo.setAttribute("width", "1060") and none of those worked. There is something i don't know about how does DOM getElementbyId works or something about declaration of global variable. Please, could somebody tell what the problem is. Any help would be appreciated.

Best regards, Dastan.

Rest of the code: html:

<!DOCTYPE html>
<html>

<head>
    <title>Second Page</title>
    <link rel="stylesheet" type="text/css" href="second.css"/>
</head>

<script src="second_script.js"></script>


<body>
    <h2>The second page</h2>
<div>
    <button onclick="Squeeze()">Squeeze</button>
    <button onclick="Enlarge()">Enlarge</button>
    <button onclick="Standard()">Standard</button>
    <button onclick="Hide_Show()">Hide/Show</button>
    <br><br>
    <video id="Video1" width="740" height ="480" controls>
    <source src="Media/IMG_0178.mp4.MOV" type="video/mp4">
    </video>
</div>
</body>

</html>

JS:

var myVideo = document.getElementById("Video1"); // it doesn't work

function Squeeze(){ // all of functions work without global variable myVideo
    document.getElementById("Video1").width = 320; 
    document.getElementById("Video1").height = 240;
}

function Enlarge(){
    document.getElementById("Video1").setAttribute("width", "1060");
    document.getElementById("Video1").setAttribute("height", "720");
}

function Standard(){
    document.getElementById("Video1").width = 740;
    document.getElementById("Video1").height = 480;
}

function Hide_Show(){
    if(document.getElementById("Video1").style.display=="none"){
        document.getElementById("Video1").style.display="inline";
    }
    else{
        document.getElementById("Video1").style.display="none";
    }
}
Zhumazhanov Dastan
  • 11
  • 1
  • 1
    There could be several reasons. Can we see more code? Like a full example that shows the problem? But, please, not too much code. Just enough to demonstrate the problem, but no more. Minimum complete example. – Vilx- May 04 '20 at 21:53
  • Sure! Just have edited and added remaining code. – Zhumazhanov Dastan May 05 '20 at 17:42
  • 2
    When you do `var myVideo = document.getElementById("Video1");` as the first thing in your JS file, the ` – Stephen P May 05 '20 at 17:46

0 Answers0