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;
        }
    }

});

上面基本上就像一个开关，当我们点击它时它会翻转 'add friend' 和 'unfriend'

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

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 语句只执行了一次，所以你只是添加事件监听器来添加朋友到按钮，当你第一次点击它时它改变了它的 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;
    };
}});

将 name="addFriend" 添加到按钮 html

JS 文件未更新为新的 ID 值

JS file is not updating to new id values

javascript

ajax

jquery

frontend

dynamic