JS 文件未更新为新的 id 值

Posted 2023-03-25

【中文标题】JS 文件未更新为新的 id 值

【英文标题】：JS file is not updating to new id values

【发布时间】：2021-08-23 09:34:00

【问题描述】：

我正在开发一个具有添加和删除朋友功能的网站 我想发出 AJAX 请求以从用户数据库中添加和删除朋友

这是我的客户端 JS 代码

window.addEventListener('DOMContentLoaded', (event) => 

    var username = document.getElementById("profileUsername").innerhtml;
    
    if(document.getElementById("addFriend")!= null)
        document.getElementById("addFriend").onclick = () => 
            $.ajax(
                
                url : '/add_friend_JSON/'+username ,
                method : 'GET' ,
                processData: false,
                contentType: false,
                success: function(status) 
                    if ( status["status"] == 0 ) 
                        document.getElementById("addFriend").innerHTML  = "Unfriend";
                        
                        document.getElementById("addFriend").setAttribute("id" , "unFriend" );
                    
                
                )
            return false;
        
    
    else 
        document.getElementById("unFriend").onclick = () => 
        
            $.ajax(
                
                url : '/remove_friend_JSON/'+username ,
                method : 'GET' ,
                processData: false,
                contentType: false,
                success: function(status) 
                    if ( status["status"] == 0 ) 
                        document.getElementById("unFriend").innerHTML  = "Add Friend";
                        
                        document.getElementById("unFriend").setAttribute("id", "addFriend");
                    
                
                )
            return false;
        
    

);

上面基本上就像一个开关，当我们点击它时，它会翻转为“添加朋友”和“取消朋友”

但问题是它只能工作一次，比如如果 id 从 and 朋友变为 unFriend 下次我点击它而不重新加载页面时，我在日志窗口中收到以下错误

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at Object.success (profile.js:36)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

这里是我的 HTML 供参考

<button type="submit" class="btn btn-warning d-btn" id = "addFriend">
        Add Friend
</button>

后端代码只是根据请求更新数据库 谢谢！

【问题讨论】：

您永远不会重新分配 onclick 回调，因此当您再次单击它时，它仍会使用先前的回调并查询 DOM 以获取不再存在的 id。但是更改id 不是解决此问题的方法，您最好使用addEventListener() 更好地控制附加到每个元素甚至事件委托的侦听器。请参阅：I am trying to make a simple toggle button in javascript 了解基本起始位置。

【参考方案1】：

问题是 if 语句只执行了 1 次，所以你只是添加事件侦听器来为按钮添加朋友，当你第一次点击它时它会改变它的 id，但按钮本身保持事件监听器，因此当您再次单击该按钮时，会发生相同的事件并尝试访问 ID 为“addFriend”的元素，但您更改了该 ID，这就是您收到该错误的原因。

解决方案：

window.addEventListener("DOMContentLoaded", (event) => 
var username = document.getElementById("profileUsername").innerHTML;

const button = document.getElementById("addFriend");

if (document.getElementById("addFriend") != null) 
    document.getElementById("addFriend").onclick = (e) => 
        if (e.target.name === "addFriend") 
            $.ajax(
                url: "/add_friend_JSON/" + username,
                method: "GET",
                processData: false,
                contentType: false,
                success: function (status) 
                    if (status["status"] == 0) 
                        document.getElementById("addFriend").innerHTML =
                            "Unfriend";

                        e.target.name = "unfriend";
                    
                ,
            );
         else if (e.target.name === "unfriend") 
            $.ajax(
                url: "/remove_friend_JSON/" + username,
                method: "GET",
                processData: false,
                contentType: false,
                success: function (status) 
                    if (status["status"] == 0) 
                        document.getElementById("addFriend").innerHTML =
                            "Add Friend";

                        e.target.name = "addFriend";
                    
                ,
            );
        

        return false;
    ;
);

在按钮 html 中添加 name="addFriend"

【讨论】：

@JayaShankarB 我只会向按钮添加 1 个事件侦听器，在事件侦听器内部检查按钮的名称属性，您需要将 name="addFriend" 添加到 html 中的按钮，再看一遍我把代码发给你了