下拉单击未触发的事件
我尝试在DOM加载后加载侦听器，对于我添加的每个选项，似乎都不起作用。这有点复杂，因为我有图像，所以我没有使用常规的html下拉列表，我也添加了编程选项。或者有时候，它会提交数字0（我不知道为什么）here's the codepen to see it working
下面是原始的js：
const wcaIdInput = document.getElementById('wcaIdInput');
const wcaIdList = document.getElementById('wcaIdList');
const dropdownList = document.getElementById('dropdown-list');
wcaIdInput.addEventListener('input', () => {
const inputValue = encodeURIComponent(wcaIdInput.value.toLowerCase());
dropdownList.addEventListener('click', (event) => {
const clickedElement = event.target;
console.log(clickedElement);
});
fetch(`https://www.worldcubeassociation.org/api/v0/search/users?q=${inputValue}&persons_table=true`)
.then(response => response.json())
.then(data => {
let top3 = [];
for (let i = 0; i < 3 && i < data.result.length; i++) {
top3.push({
name: data.result[i].name,
id: data.result[i].id,
avatarUrl: data.result[i].avatar.url
});
}
populateOptions(top3);
})
.catch(error => {
console.error(error);
});
});
// wcaIdList.addEventListener('change', (event) => {
// wcaIdInput.value = event.target.value;
// });
document.addEventListener('click', (event) => {
const clickedElement = event.target;
if (dropdownList.contains(clickedElement)) {
console.log(clickedElement);
}
});
function populateOptions(options) {
dropdownList.innerHTML = '';
if (options.length > 1) {
options.reverse().forEach(option => {
const optionElement = document.createElement('li');
optionElement.value = option.id;
optionElement.innerHTML = `
<img src="${option.avatarUrl}" alt="Avatar" width="40" height="40">
<span class="bigger-text">${option.name}</span>
<span class="smaller-text">${option.id}</span>
`;
optionElement.addEventListener('click', () => {
console.log('yo what?');
console.log('Clicked option:', optionElement); // New console log
wcaIdInput.value = optionElement.value;
hideDropdown();
submitWcaId();
});
dropdownList.appendChild(optionElement);
});
dropdownList.style.display = 'block';
dropdownList.style.top = `${wcaIdInput.offsetTop + wcaIdInput.offsetHeight}px`;
dropdownList.style.left = `${wcaIdInput.offsetLeft}px`;
} else if (options.length === 1) {
const optionElement = document.createElement('li');
optionElement.value = options[0].id;
optionElement.innerHTML = `
<img src="${options[0].avatarUrl}" alt="Avatar" width="40" height="40">
<span class="bigger-text">${options[0].name}</span>
`;
console.log(optionElement);
optionElement.addEventListener('click', () => {
console.log("click moment!");
console.log('Clicked option:', optionElement); // New console log
wcaIdInput.value = optionElement.value;
hideDropdown();
submitWcaId();
});
dropdownList.appendChild(optionElement);
// Show and position the dropdown list
dropdownList.style.display = 'block';
dropdownList.style.top = `${wcaIdInput.offsetTop + wcaIdInput.offsetHeight}px`;
dropdownList.style.left = `${wcaIdInput.offsetLeft}px`;
} else {
hideDropdown();
}
}
function hideDropdown() {
dropdownList.style.display = 'none';
}
wcaIdInput.addEventListener('focus', () => {
if (wcaIdInput.value.trim() !== '') {
dropdownList.style.display = 'block';
}
});
wcaIdInput.addEventListener('blur', () => {
hideDropdown();
});html：
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div class="container">
<div class="dropdown">
<input type="text" id="wcaIdInput" name="wcaIdInput" placeholder="WCA ID" autocomplete="off" autofocus>
<ul id="dropdown-list"></ul>
</div>
<button id="submitBtn">Submit</button>
</div>
<div id="loading" style="display: none;">
<div class="loader"></div>
</div>
<div id="error" class="error"></div>
<div id="tableContainer"></div>
<script src="js/upcoming.js"></script>
</body>
</html>
1条答案
按热度按时间nnt7mjpx1#
下面的
onBlur处理程序在点击一个项目之前触发并隐藏下拉列表。
因此，您的单击不会到达项目，因此不会执行单击回调。
注解掉这个处理程序可以解决问题。
您可能希望删除此处理程序或使用其他事件来隐藏下拉列表。