从零开始用JavaScript实现文件服务器实时监控指标

问题1：外部JS无法修改DOM元素 #

你的外部JS代码执行时，页面DOM还没完全加载完成，导致document.getElementById("raidstatus")找不到目标元素。解决方法是把DOM操作代码放在DOMContentLoaded事件回调中，确保页面元素渲染完成后再执行：

修改后的app.js相关代码：

'use strict';

// 等待DOM加载完成后执行操作
document.addEventListener('DOMContentLoaded', function() {
    // 测试代码，确认DOM操作生效
    document.getElementById("raidstatus").innerHTML = "测试文本";
});

问题2：动态读取RAID状态文件并实时更新 #

你需要实现定时请求服务器上的raidstatus.txt文件，并将内容更新到页面中。可以使用setInterval设置定时任务，配合fetch（更现代）实现数据请求：

完整修改后的app.js #

'use strict';

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化时先读取一次状态
    loadRaidStatus();
    // 每分钟更新一次（和cron任务频率同步）
    setInterval(loadRaidStatus, 60000);
});

function loadRaidStatus() {
    // 使用fetch API读取文件
    fetch('raidstatus.txt')
        .then(response => {
            if (!response.ok) {
                throw new Error('无法获取RAID状态');
            }
            return response.text();
        })
        .then(text => {
            // 将文本内容更新到页面，保留格式用<pre>包裹
            document.getElementById("raidstatus").innerHTML = `<pre>${text}</pre>`;
        })
        .catch(error => {
            document.getElementById("raidstatus").innerHTML = `加载失败: ${error.message}`;
        });
}

其他代码修正 #

CSS文件

你的CSS末尾缺少闭合的}，补充完整：

body {
    font-family: monospace;
}
ul {
    font-family: helvetica;
}
li {
    list-style: circle;
}
.list {
    list-style: square;
}  
#msg {
    font-family: monospace;
}
.dark-theme {
    --bg: var(--black);
    --fontColor: var(--green);
    --btnBg: var(--white);
    --btnFontColor: var(--black);
}
:root {
    --green: #00FF00;
    --white: #FFFFFF;
    --black: #000000;
}
body {
    background: var(--bg);
    color: var(--fontColor);
    font-family: helvetica;
} /* 补充这个闭合括号 */

额外注意事项 #

• 确保raidstatus.txt文件放在网页根目录（或和HTML同目录），否则要修改fetch的路径
• 如果遇到跨域问题，确保网页和文件在同一个域名下（本地开发或服务器部署时没问题）
• 后续可以根据/proc/mdstat的内容，添加样式美化，比如高亮异常状态

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