JavaScript报错：未找到变量SSL，请求排查代码问题

嘿，我来帮你搞定这个问题！你遇到的“未找到变量SSL”报错，核心是变量作用域不匹配，同时代码里还有几处数据操作的小问题，咱们逐一解决：

一、核心错误：SSL变量的作用域问题 #

你在start()函数内部定义了var SSL = new function(){...}，这意味着SSL是start()函数的局部变量，只能在函数内部访问。但你在HTML的按钮上直接写了onclick="SSL.Edit()"、表单的onsubmit="SSL.Add()"——这些都是在全局作用域下调用SSL，自然会提示“未找到变量”。

修复方案：把SSL暴露到全局作用域 #

最简单的方式是在函数外部先声明全局变量，再在start函数内部赋值：

let SSL; // 全局声明SSL变量
function start() {
  SSL = new function() {
    // ... 原代码内容
  }
  SSL.FetchAll();
}

二、代码里的其他功能异常问题 #

除了作用域，你的数据操作逻辑也有几处错误，不修复会导致添加、编辑、删除功能失效：

1. MyJSON结构操作错误：MyJSON应该是包含name和url属性的对象数组，但你用MyJSON.name.push()的写法完全错误，应该往数组里push完整的对象；
2. Edit函数逻辑错误：self.urls.splice(item, 1, url.trim())里的self.urls不存在，应该直接修改MyJSON数组里的对象属性；
3. Delete函数遗漏操作：只删除了MyJSON.name的元素，没有同步删除对应位置的URL数据；
4. Add函数逻辑冗余：重复的if(url)判断，且未校验两个输入框的内容是否都有效。

三、修正后的完整JS代码 #

let SSL; // 全局声明SSL变量
function start() {
  SSL = new function() {
    //List urls to check
    this.el = document.getElementById('urls');

    this.Count = function(data) {
      var el = document.getElementById('counter');
      var name = 'url';
      if (data) {
        if (data > 1) {
          name = 'urls';
        }
        el.innerHTML = 'There are:' + ' ' + data + ' ' + name;
      } else {
        el.innerHTML = 'No ' + name;
      }
    };

    //Buttons configuration
    this.FetchAll = function() {
      var data= '';
      if (MyJSON.length > 0) {
        for (let i = 0; i < MyJSON.length; i++) {
          data += '<tr>';
          data += '<td><a href="' + MyJSON[i].url + '">' + MyJSON[i].name+ '</a></td>';
          data += '<td><button onclick="SSL.Edit(' + i + ')">Edit</button></td>';
          data += '<td><button onclick="SSL.Delete(' + i + ')">Delete</button></td>';
          data += '</tr>';
        }
      }
      this.Count(MyJSON.length);
      this.el.innerHTML = data;
    };

    //Add name
    this.Add = function() {
      const nameInput = document.getElementById('add-name');
      const linkInput = document.getElementById('add-link')
      const name = nameInput.value.trim();
      const url = linkInput.value.trim();
      
      // 校验两个输入都不为空
      if (name && url) {
        MyJSON.push({ name, url }); // 往数组里push完整对象
        nameInput.value = '';
        linkInput.value = '';
        this.FetchAll();
      }
    }

    //Edit
    this.Edit = function(item) {
      const el = document.getElementById('edit-name');
      el.value = MyJSON[item].name;
      document.getElementById('edit').style.display = 'block';
      const self = this;
      document.getElementById('saveEdit').onsubmit = function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        const newName = el.value.trim();
        if (newName) {
          MyJSON[item].name = newName; // 修改对应对象的name属性
          self.FetchAll();
          CloseInput();
        }
        return false;
      };
    };

    //Delete
    this.Delete = function(item) {
      MyJSON.splice(item, 1); // 直接删除数组里的对应对象
      this.FetchAll();
    };
  }
  SSL.FetchAll();
}

function CloseInput() {
  document.getElementById('edit').style.display = 'none';
}

额外优化建议 #

• 尽量避免内联事件（比如onclick="SSL.Edit()"），可以用addEventListener在JS内部绑定事件，这样更符合现代前端规范，也能从根源避免作用域问题；
• 给循环变量i加上let声明，避免全局变量污染；
• 表单提交时加上e.preventDefault()，防止页面不必要的刷新。

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