Hi, I am starting with HTML, CSS and JavaScript. I got an exercise where I have to create a button that will play or pause a video depending of its status. The thing is that if I make a var with the getelement to save time and dont need to type so much, it just stops working, and I dont understand why.
Basically, if I write like this, it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opdracht 9-6.</title>
<script type="text/javascript">
function play(){
if(document.getElementById("video1").paused){
document.getElementById("video1").play();
}
else{
document.getElementById("video1").pause();
}
}
</script>
</head>
<body>
<button type="button" onclick="play()">Play</button>
<br>
<video id="video1">
<source src="video/clickbait.webm">
</video>
</body>
</html>
BUUUUUUT, if I write it like this, should be the same, but it doesnt work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opdracht 9-6.</title>
<script type="text/javascript">
var mivideo=document.getElementById("video1");
function play(){
if(mivideo.paused){
mivideo.play();
}
else{
mivideo.pause();
}
}
</script>
</head>
<body>
<button type="button" onclick="play()">Play</button>
<br>
<video id="video1">
<source src="video/clickbait.webm">
</video>
</body>
</html>
What am I doing wrong? t.t
Basically, if I write like this, it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opdracht 9-6.</title>
<script type="text/javascript">
function play(){
if(document.getElementById("video1").paused){
document.getElementById("video1").play();
}
else{
document.getElementById("video1").pause();
}
}
</script>
</head>
<body>
<button type="button" onclick="play()">Play</button>
<br>
<video id="video1">
<source src="video/clickbait.webm">
</video>
</body>
</html>
BUUUUUUT, if I write it like this, should be the same, but it doesnt work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opdracht 9-6.</title>
<script type="text/javascript">
var mivideo=document.getElementById("video1");
function play(){
if(mivideo.paused){
mivideo.play();
}
else{
mivideo.pause();
}
}
</script>
</head>
<body>
<button type="button" onclick="play()">Play</button>
<br>
<video id="video1">
<source src="video/clickbait.webm">
</video>
</body>
</html>
What am I doing wrong? t.t
