JavaScript数组问题：点击编辑按钮显示[object Object]而非真实值

咱们来一步步搞定你遇到的问题：

问题根源分析 #

1. 显示[object Object]的原因：你在Edit函数里写了el.value = Checker[item];，这里Checker[item]是一个包含name和url的完整对象，输入框只能显示字符串，所以浏览器把对象转换成了默认的[object Object]字符串。
2. 显示undefined的原因：你改成Checker[Name]是拼写和逻辑错误，正确的写法应该是Checker[item].name——这里要用小写的name（对应JSON里的属性名），且item是当前编辑项的索引值。
3. 无法保存修改的原因：提交编辑的代码有两处错误：一是self.Checker不存在（Checker是全局变量，不属于SSL对象）；二是name变量未定义，根本没获取到输入框的新值。

修改后的完整JS代码 #

function start() {
    var 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 (Checker.length > 0) {
                for (i = 0; i < Checker.length; i++) {
                    data += '<tr>';
                    data += '<td><a href="http://' + Checker[i].url + '">' + Checker[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(Checker.length);
            return this.el.innerHTML = data;
        };

        //Add name
        this.Add = function() {
            el = document.getElementById('add-name');
            el1 = document.getElementById('add-link')
            var url = el.value;
            var url1 = el1.value;
            if (url) {
                Checker.push({
                    "name": url,
                    "url": url1
                })
                el.value = '';
                el1.value = ''; // 新增：清空链接输入框，优化体验
                this.FetchAll();
            }
        }

        //Edit 修复后的核心代码
        this.Edit = function(item) {
            var el = document.getElementById('edit-name');
            // 赋值为当前项的name属性，显示正确的网站名称
            el.value = Checker[item].name;
            document.getElementById('edit').style.display = 'block';
            self = this;
            document.getElementById('saveEdit').onsubmit = function() {
                var newName = el.value.trim(); // 获取输入的新名称并去除前后空格
                if (newName) {
                    // 直接更新对应对象的name属性，保留原url
                    Checker[item].name = newName;
                    self.FetchAll();
                    CloseInput();
                }
            }
        };

        //Delete
        this.Delete = function(item) {
            Checker.splice(item, 1);
            this.FetchAll();
        };
    };

    SSL.FetchAll();

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

    window.CloseInput = CloseInput;
    window.SSL = SSL;
}

关键修改点说明 #

• 在Edit函数中，将el.value = Checker[item];改为el.value = Checker[item].name;，让输入框正确显示网站名称。
• 提交编辑时，改为直接更新Checker[item].name属性，既保留了原有的url值，又修正了变量未定义的问题。
• 新增了清空add-link输入框的代码，优化添加后的操作体验。

现在点击Edit按钮，输入框会显示正确的网站名称，修改后提交也能正常更新列表啦！

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