前端项目按钮点击报错：未找到变量SSL，求技术支持

我帮你梳理了下代码里的问题，主要是作用域、数据结构、逻辑错误这三个核心点，同时帮你加上了LocalStorage存储和默认静态站点的功能，一步步来修复：

1. 先解决「Can't find variable SSL」错误 #

你之前把SSL对象定义在start()函数内部，属于局部变量，页面上的onclick="SSL.Edit()"这类事件根本访问不到它。最简单的解决方式是把SSL挂载到全局的window对象上，让页面所有地方都能调用。

2. 修正JSON取值显示Undefined的问题 #

你的代码错误地把MyJSON当成了包含name和url两个独立数组的对象，但实际上应该是一个存满{name: "站点名", url: "链接"}对象的数组。我帮你初始化了默认的静态站点（谷歌、雅虎、必应），同时加上了LocalStorage的读取逻辑——页面加载时先从本地存储读数据，没有的话就用默认值。

3. 修复Add/Edit/Delete的逻辑漏洞 #

• Add函数之前重复判断、错误地分开pushname和url，现在改成验证完名称和链接后，直接把完整的对象push到数组里。
• Edit函数之前只改了名称没改链接，我给编辑表单加了链接输入框，同时修正了错误的数组操作逻辑。
• Delete函数之前只删了名称数组的元素，现在直接删除整个站点对象。

修正后的完整代码 #

HTML代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <title>SSL Checker</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body onLoad="start()"> 
    <div id="title"> 
        <h1>SSL Checker</h1> 
    </div> 
    <div id="data"> 
        <form action="javascript:void(0);" method="POST" onsubmit="SSL.Add()"> 
            <input type="text" id="add-name" placeholder="Name">
            <input type="text" id="add-link" placeholder="Link">
            <input type="submit" value="Add"> 
        </form> 
        <div id="edit" role="aria-hidden" style="display:none;"> 
            <form action="javascript:void(0);" method="POST" id="saveEdit"> 
                <input type="text" id="edit-name" placeholder="Name">
                <input type="text" id="edit-link" placeholder="Link">
                <input type="submit" value="Save Edit" /> 
                <a onclick="CloseInput()" aria-label="Close">&#10006;</a> 
            </form> 
        </div> 
        <p id="counter"></p> 
    </div> 
    <div id="table"> 
        <table style="overflow-x:auto;"> 
            <tr> 
                <th>Sites:</th> 
                <th>Actions</th>
            </tr> 
            <tbody id="urls"> 
            </tbody> 
        </table> 
    </div> 
    <script type="text/javascript" src="js/script.js"></script> 
</body> 
</html>

JS代码（script.js） #

function start() {
    // 初始化数据：优先从LocalStorage读取，没有则用默认静态站点
    let MyJSON = JSON.parse(localStorage.getItem('sslSites')) || [
        { name: 'Google', url: 'https://www.google.com' },
        { name: 'Yahoo', url: 'https://www.yahoo.com' },
        { name: 'Bing', url: 'https://www.bing.com' }
    ];

    // 把SSL挂载到全局window对象，让页面onclick能访问到
    window.SSL = {
        el: document.getElementById('urls'),

        // 更新站点计数显示
        Count: function(data) {
            const el = document.getElementById('counter');
            const name = data > 1 ? 'urls' : 'url';
            el.innerHTML = data ? `There are: ${data} ${name}` : `No ${name}`;
        },

        // 渲染所有站点到表格
        FetchAll: function() {
            let data = '';
            if (MyJSON.length > 0) {
                for (let i = 0; i < MyJSON.length; i++) {
                    data += `
                        <tr>
                            <td><a href="${MyJSON[i].url}" target="_blank">${MyJSON[i].name}</a></td>
                            <td>
                                <button onclick="SSL.Edit(${i})">Edit</button>
                                <button onclick="SSL.Delete(${i})">Delete</button>
                            </td>
                        </tr>
                    `;
                }
            }
            this.Count(MyJSON.length);
            this.el.innerHTML = data;
            // 每次渲染后把数据保存到LocalStorage
            localStorage.setItem('sslSites', JSON.stringify(MyJSON));
        },

        // 添加新站点
        Add: function() {
            const nameEl = document.getElementById('add-name');
            const linkEl = document.getElementById('add-link');
            const name = nameEl.value.trim();
            const url = linkEl.value.trim();

            if (name && url) {
                MyJSON.push({ name, url });
                nameEl.value = '';
                linkEl.value = '';
                this.FetchAll();
            }
        },

        // 编辑站点
        Edit: function(itemIndex) {
            const editNameEl = document.getElementById('edit-name');
            const editLinkEl = document.getElementById('edit-link');
            // 填充当前站点的名称和链接
            editNameEl.value = MyJSON[itemIndex].name;
            editLinkEl.value = MyJSON[itemIndex].url;
            // 显示编辑框
            document.getElementById('edit').style.display = 'block';

            const self = this;
            // 绑定保存编辑的事件
            document.getElementById('saveEdit').onsubmit = function(e) {
                e.preventDefault();
                const newName = editNameEl.value.trim();
                const newUrl = editLinkEl.value.trim();
                if (newName && newUrl) {
                    MyJSON[itemIndex] = { name: newName, url: newUrl };
                    self.FetchAll();
                    CloseInput();
                }
            };
        },

        // 删除站点
        Delete: function(itemIndex) {
            MyJSON.splice(itemIndex, 1);
            this.FetchAll();
        }
    };

    // 页面加载完成后初始化渲染站点
    SSL.FetchAll();
}

// 关闭编辑输入框
function CloseInput() {
    document.getElementById('edit').style.display = 'none';
}

现在你重新运行代码，应该能解决之前的所有问题：站点能正常显示、按钮点击不会报错、添加/编辑/删除功能正常，而且数据会存在LocalStorage里，刷新页面也不会丢失。

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