点击视频播放按钮触发Uncaught SyntaxError错误，求技术解决方案

核心错误点 #

1. 动态HTML标签语法错误：生成<div class="inDiv"时未闭合标签（缺少>），导致DOM结构断裂，触发语法错误。
2. onclick属性字符串拼接错误：构造onclick值时，直接拼接文件名会因空格/特殊字符破坏语法，且引号嵌套逻辑混乱，导致JS代码未闭合。
3. 冗余的事件嵌套：$(window).on('load')内部嵌套$(document).ready()完全多余，前者执行时机晚于后者，无需重复绑定。
4. HTML脚本标签语法错误：引入VideoGet.js的script标签中，CDATA标记未闭合，可能干扰脚本解析。

修复后的JS代码 #

let GettedVideo;
const Video_player = document.getElementById('vidplay');

$(window).on('load', function(){
    const fileExt = ".mp4";

    $.ajax({
        url: 'content/videos',
        success: function (data) {
            console.log(data);
            $("#fileNames").html('<ul>');

            $(data).find("a:contains(" + fileExt + ")").each(function () {
                const videoName = $(this).text();
                // 用模板字符串生成HTML，避免引号嵌套问题
                const itemHtml = `
                    <div class="inDiv">
                        <li>${videoName}</li>
                        <button onclick="PlayVideo('${videoName.replace(/'/g, "\\'")}')">
                            <i class="fa-solid fa-play"></i> Play
                        </button>
                    </div>
                `;
                $("#fileNames").append(itemHtml);
                GettedVideo = videoName;
                console.log(GettedVideo);
            });
            $("#fileNames").append('</ul>');
        }
    });
});

function PlayVideo(targetVideoName) {
    const videoPath = `content/videos/${targetVideoName}`;
    console.log(videoPath);
    Video_player.src = videoPath;
    Video_player.load();
    Video_player.play();
    console.log(`Video ${videoPath} Playing...`);
}

修复后的HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>kd</title>
        <link rel="stylesheet" href="assets/style/style.css">
        <link rel="stylesheet" href="assets/icons/fontawesome-free-6.6.0-web/css/all.min.css">
    </head>
    <body>
        <div class="elementsBackround">
            <div class="videoDiv">
                <video controls class="vidCon" id="vidplay">
                    <source id="source" src="">
                </video>
            </div>
            
            <h1>Video List:</h1>
            <div class="divElements" id='fileNames'></div>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="assets/scripts/VideoGet.js" type="text/javascript"></script>
    </body>
</html>

关键修复说明 #

• 标签闭合修复：将<div class="inDiv"<li>改为<div class="inDiv"><li>，确保DOM结构合法。
• onclick属性优化：使用模板字符串生成HTML，同时对文件名中的单引号进行转义（replace(/'/g, "\\'")），避免因特殊字符破坏JS语法。
• 移除冗余嵌套：删除内部的$(document).ready()，简化代码执行逻辑。
• HTML优化：移除重复的Font Awesome引用（仅保留all.min.css即可），并修复script标签的CDATA问题（直接移除多余的CDATA标记，现代浏览器无需兼容旧标准）。

内容的提问来源于stack exchange，提问作者Aaaaaaag