如何用JavaScript动态修改JSP页面文件图标？代码报错求助

咱们一步步来解决你的问题，你遇到的报错和图标不切换的问题，根源是几个小但关键的错误：

问题分析 #

1. 参数传递的语法错误
   你在JSP里写的onload="fileIcon(${j.getFile()})"会把文件名直接当成变量名解析，比如文件名是test.txt，浏览器会理解成调用fileIcon(test.txt)——但test.txt不是合法的变量名，这就触发了SyntaxError。必须把文件名用引号包起来，让浏览器识别成字符串参数。

2. 重复的ID导致无法定位元素
   所有图片都用了同一个id="file-icon"，而document.getElementById()只会返回第一个匹配的元素，所以只有第一行的图标会被修改，后面的都不会生效。

3. 未处理无扩展名的文件
   如果文件名里没有.，filename.indexOf(".")会返回-1，substring会得到错误的结果，导致后续判断失效。

修复后的代码方案 #

第一步：修改JSP中的图片标签

把重复的id去掉，改成传递当前图片元素和带引号的文件名：

<td><img src="resources/images/icons/file.svg" class="file-icon" onload="fileIcon(this, '${j.getFile()}')"></td>

第二步：修改main.js中的fileIcon函数

直接操作传入的图片元素，用更简洁的对象映射替代多个if，同时处理无扩展名的情况：

function fileIcon(imgElement, filename) {
    // 获取扩展名，先检查文件名里有没有点
    const dotPosition = filename.lastIndexOf(".");
    let extension = "";
    if (dotPosition !== -1) {
        // 转小写，避免大小写问题（比如.TXT和.txt统一处理）
        extension = filename.substring(dotPosition).toLowerCase();
    }

    // 用对象映射扩展名到图标路径，比一堆if更易维护
    const iconPathMap = {
        ".txt": "resources/images/icons/txt.svg",
        ".pdf": "resources/images/icons/pdf.svg",
        ".jpeg": "resources/images/icons/jpeg.svg",
        ".jpg": "resources/images/icons/jpg.svg",
        ".png": "resources/images/icons/png.svg",
        ".gif": "resources/images/icons/gif.svg"
    };

    // 设置图标：有匹配的扩展名就用对应图标，否则用默认的file.svg
    imgElement.src = iconPathMap[extension] || "resources/images/icons/file.svg";
}

更高效的无JS方案（推荐） #

其实不需要用前端JS来切换图标，直接在JSP后端生成对应的图标路径会更高效，还能避免前端可能的加载问题。你需要先引入JSTL的函数标签库（页面顶部加）：

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

然后替换原有的图片标签部分：

<td>
    <c:set var="fileName" value="${j.getFile()}"/>
    <c:set var="dotIndex" value="${fn:lastIndexOf(fileName, '.')}"/>
    <c:choose>
        <c:when test="${dotIndex != -1}">
            <c:set var="extension" value="${fn:substring(fileName, dotIndex)}"/>
            <c:choose>
                <c:when test="${extension == '.txt' || extension == '.TXT'}"><img src="resources/images/icons/txt.svg" class="file-icon"></c:when>
                <c:when test="${extension == '.pdf' || extension == '.PDF'}"><img src="resources/images/icons/pdf.svg" class="file-icon"></c:when>
                <c:when test="${extension == '.jpeg' || extension == '.JPEG'}"><img src="resources/images/icons/jpeg.svg" class="file-icon"></c:when>
                <c:when test="${extension == '.jpg' || extension == '.JPG'}"><img src="resources/images/icons/jpg.svg" class="file-icon"></c:when>
                <c:when test="${extension == '.png' || extension == '.PNG'}"><img src="resources/images/icons/png.svg" class="file-icon"></c:when>
                <c:when test="${extension == '.gif' || extension == '.GIF'}"><img src="resources/images/icons/gif.svg" class="file-icon"></c:when>
                <c:otherwise><img src="resources/images/icons/file.svg" class="file-icon"></c:otherwise>
            </c:choose>
        </c:when>
        <c:otherwise><img src="resources/images/icons/file.svg" class="file-icon"></c:otherwise>
    </c:choose>
</td>

这个方案在页面渲染时就直接生成了正确的图标路径，不需要依赖前端JS，加载速度更快，也不会有JS报错的问题。

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