'onclick' event handler created in javascript is not working

Question

The 'click' event listener is not being added to the button. The buttons do appear correctly with the other attributes. I have searched for a while and haven't been able to find a solution.

const connectedFriendsList = document.querySelector('#connected-friends-list');

 function openMessengerWith(){
    var friend_id = this.value;
    console.log('Opening messenger with : ', friend_id);    
}

// =======================================================
//  Create elements and render friends list
//
var but;
function renderFriendsList(doc){
    console.log('Rendering friend...');

    but = document.createElement("input");
    but.setAttribute("value", doc.id);
    but.setAttribute("type", 'button');
    but.id = doc.id;
    but.addEventListener('click', function(){
    openMessengerWith();
}, false);
    console.log(but);
    connectedFriendsList.appendChild(but);
    console.log('Friend listed.');
}

The renderFriendsList function is being called down at the bottom.

firestore.collection('Users').doc(uid).collection('Friends').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderFriendsList(doc);
    })
});

EDITED:

    function openMessengerWith(value){
    var friend_id = value;
    console.log('Opening messenger with : ', friend_id);    
}

function renderFriendsList(doc){
    console.log('Rendering friend...');
    var but = document.createElement("button");
    but.setAttribute("value", doc.id);
    but.setAttribute("type", 'button');
    but.id = doc.id;
    but.innerHTML = doc.id;
    connectedFriendsList.appendChild(but);
    attachClickEvent(doc.id);
    console.log('Friend listed.');
}

function attachClickEvent(value){
    var test1 = document.getElementById(value);
    console.log('current obj',test1);
    document.getElementById(value).addEventListener("click", 
    function(){
        openMessengerWith(value);
    });
    console.log('click events attached');
}

LOG: Here is the updated log. As you can see the buttons are created. However, the event listeners are not being attached.

Rendering friend...           messagesmain.js:71

    current obj <button value=​"6r7CllAhMhPgmrhhjx1aneBCBbc2" type=​"button" id=​"6r7CllAhMhPgmrhhjx1aneBCBbc2">​6r7CllAhMhPgmrhhjx1aneBCBbc2​</button>​
                  messagesmain.js:76
click events attached          messagesmain.js:56
Friend listed.                 messagesmain.js:48
Rendering friend...            messagesmain.js:71

    current obj <button value=​"J1EbJJ9iZKTspqiSKawZN7i5pPh2" type=​"button" id=​"J1EbJJ9iZKTspqiSKawZN7i5pPh2">​J1EbJJ9iZKTspqiSKawZN7i5pPh2​</button>​
             messagesmain.js:76
click events attached          messagesmain.js:56
Friend listed.                 messagesmain.js:48
Rendering friend...            messagesmain.js:71
current obj 

    <button value=​"xSLBN2BqVocemn0OWOKh2UGY8Pt1" type=​"button" id=​"xSLBN2BqVocemn0OWOKh2UGY8Pt1">​xSLBN2BqVocemn0OWOKh2UGY8Pt1​</button>​
                 messagesmain.js:76

click events attached          messagesmain.js:56
Friend listed.

Answer 1

If you want to get the value of input, use this is a good idea. But you need to know the reference of this .
In your code, the reference of this is window , not <input> tag. That's why you can't get the value. So you need to pass this.value into function openMessengerWith

but = document.createElement("input");
but.addEventListener('click', function() {
    let value = this.value;
    openMessengerWith(value);

}, false);

function openMessengerWith(value){
    var friend_id = value;
    console.log('Opening messenger with : ', friend_id); 
}

connectedFriendsList.appendChild(but);