「已注销」 2022-01-19 13:46 采纳率: 85.7%
浏览 33
已结题

用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>
  • 写回答

2条回答 默认 最新

  • 前端互助会 2022-01-19 14:00
    关注

    错误原因
    你html标签上都是class , js里面获取的是id;
    需要修改：
    正确展示如下：

    img

    代码修改

    

<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 1月27日
  • 已采纳回答 1月19日
  • 创建了问题 1月19日

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog