When I press a button, my action doesn’t work out from the first time, and from the second time, it works 2 times, then when it’s pressed again, it works 3 times, and so on with an arithmetic progression. The displayRooms function displays the rooms, the displayRoom displays it, and the setRoom performs when you press the buttons

function displayRooms() { rooms.orderByValue().once("value", function(snapshot) { snapshot.forEach(function(data) { console.log("The roomname is ->" + data.key()); $(".rooms").prepend('<li><button type="button" class= "rooms1" id="' + data.key() + '" onclick="setRoomName()"' + '>' + data.key() + '</button></li>'); }); }); function setRoomName() { $(".rooms1").click(function() { roomName = this.id; console.log(this.id); displayRoom(); }) }; function displayRoom() { roomRef = rooms.child("/" + roomName); roomRef.once("value", function(snapshot) { var data = snapshot.val(); console.log(data); var arr = $.map(data, function(el) { return el }); console.log(arr); var countMsg = arr.length; console.log(countMsg); $(".main").empty(); for (var i = 0; i<countMsg; i++) { var arr1 = $.map(arr[i], function(el) { return el }); console.log("this is a username ->" + arr1[0] + " & this is a message->" + arr1[1]); $(".main").prepend('<p>' + arr1[0] + ' says: ' + arr1[1] + '</p>'); } }); };

The question is, how to make the function not be repeated?

    1 answer 1

    Each time the setRoomName function is setRoomName , it adds a new click handler to all elements ".rooms1" .

    Remove onclick="setRoomName()" , assign a click event handler once using delegation:

     $(document).ready(function() { $(document).on("click", ".rooms1", function() { console.log(this.id); displayRoom(this.id); }); }; function displayRoom(roomName){ ... }