JS 文件未更新为新的 id 值

Question

我正在开发一个具有添加和删除朋友功能的网站 我想发出 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>

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

Answer 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"