[英]'onclick' event handler created in javascript is not working
The 'click' event listener is not being added to the button. 'click'事件侦听器未添加到按钮。 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. renderFriendsList函数在底部被调用。
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.
If you want to get the value of input, use this
is a good idea. 如果要获取输入的值,请使用this
方法。 But you need to know the reference of this
. 但是你需要知道的参考this
。
In your code, the reference of this
is window
, not <input>
tag. 在您的代码中, this
的引用是window
,而不是<input>
标记。 That's why you can't get the value. 这就是为什么您无法获得价值。 So you need to pass this.value
into function openMessengerWith
因此,您需要openMessengerWith
this.value
传递给函数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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.