用JS写的点击超级链接跳出播放视频的小窗口不起作用
用JS写的单击事件，点击超链接跳出播放视频的小弹窗，但是在点击超链接的时候不起作用，不知道什么原因小窗口弹不出来，代码贴在下面有回的兄弟看看是什么原因。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
*{
margin: 0;
padding: 0;
}
.tan{
margin:200px auto;
width:600px;
height: 400px;
background-color: #ff6700;
position: relative;
display: none;
}
.video{
width:100%;
height: 400px;
}
.cha{
width: 20px;
height: 21px;
padding-left: 7px;
background-color: dodgerblue;
position: absolute;
right: 1px;
top: 1px;
}
</style>
</head>
<body>
<div>
<a class="dianJi" href="javascript:;">点击查看视频
</a>
</div>
<div class="tan">
<video class="video"></video>
<div class="cha">
<a class="aa" href="#">X</a>
</div>
</div>
<script>
var dianJi = document.getElementById('dianJi');
var tan = document.getElementById('tan');
var video = document.getElementById('video');
/*var cha = document.getElementById('cha');*/
var aa = document.getElementById('aa');
dianJi.onclick=function () {
tan.style.display='block';
video.innerHTML='<video src="vid/turandeziwo.mkv" poster="" oncontextmenu="return false"></video>';
}
aa.onclick= function () {
tan.style.display='none';
}
</script>
</body>
</html>
错误原因
你html标签上都是class , js里面获取的是id;
需要修改：
正确展示如下：
代码修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
*{
margin: 0;
padding: 0;
}
#tan{
margin:200px auto;
width:600px;
height: 400px;
background-color: #ff6700;
position: relative;
display: none;
}
#video{
width:100%;
height: 400px;
}
#cha{
width: 20px;
height: 21px;
padding-left: 7px;
background-color: dodgerblue;
position: absolute;
right: 1px;
top: 1px;
}
</style>
</head>
<body>
<div>
<a id="dianJi" href="javascript:;">点击查看视频
</a>
</div>
<div id="tan">
<video id="video"></video>
<div id="cha">
<a id="aa" href="#">X</a>
</div>
</div>
<script>
var dianJi = document.getElementById('dianJi');
var tan = document.getElementById('tan');
var video = document.getElementById('video');
/*var cha = document.getElementById('cha');*/
var aa = document.getElementById('aa');
dianJi.onclick=function () {
tan.style.display='block';
video.innerHTML='<video src="vid/turandeziwo.mkv" poster="" oncontextmenu="return false"></video>';
}
aa.onclick= function () {
tan.style.display='none';
}
</script>
</body>
</html>
你的节点获取的有问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
*{
margin: 0;
padding: 0;
}
.tan{
margin:200px auto;
width:600px;
height: 400px;
border:1px solid #ccc;
/* background-color: #ff6700; */
position: relative;
display: none;
}
.video{
width:100%;
height: 400px;
}
.cha{
width: 20px;
height: 21px;
padding-left: 7px;
background-color: dodgerblue;
position: absolute;
right: 1px;
top: 1px;
}
</style>
</head>
<body>
<div>
<a class="dianJi" href="javascript:;">点击查看视频
</a>
</div>
<div class="tan">
<div class="video"></div>
<div class="cha">
<a class="aa" href="#">X</a>
</div>
</div>
<script>
var dianJi = document.querySelector('.dianJi');
var tan = document.querySelector('.tan');
var video = document.querySelector('.video');
/*var cha = document.querySelector('cha');*/
var aa = document.querySelector('.aa');
dianJi.onclick=function () {
tan.style.display='block';
video.innerHTML='<video src="vid/turandeziwo.mkv" poster="" oncontextmenu="return false"></video>';
}
aa.onclick= function () {
tan.style.display='none';
}
</script>
</body>
</html>