I am trying to populate my dropdown menu with the information data in my js file. Each time i click on the button, 3 objects are added to the dropdown. I only want the three to show whenever I click. I am also getting just [object object], no real value. What am I missing?
index.js
const information = [
{
"gender": "prefer not to say",
"age": "20"
},
{
"gender": "female",
"age": "9"
},
{
"gender": "male",
"age": "18"
}
];
const dropDownDisplay = () => {
for(i=0; i<information.length; i++){
const item = document.createElement("a");
item.setAttribute("class","dropdown-item");
item.href = "#";
const node = document.createTextNode(information[i]);
item.appendChild(node);
document.getElementsByClassName('dropdown-menu')[0].appendChild(item);
console.log(item)
}
}
const dropdownMenuButton = document.getElementById("dropdownMenuButton");
dropdownMenuButton.addEventListener("click", (event) => dropDownDisplay());
}
index.html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#"></a></li>
</ul>
</div>
I hope it is fine now. For future - if you pass object, you need to specify which key/value pair you need (Example: information[i].gender). Otherwise will get a reference to an object [object Object] index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul class="dropdown-menu d-none" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">123</a></li>
<li><a class="dropdown-item" href="#">123</a></li>
<li><a class="dropdown-item" href="#">123</a></li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
const information =
[
{
"gender": "prefer not to say",
"age": "20",
},
{
"gender": "female",
"age": "9",
},
{
"gender": "male",
"age": "18",
}
];
const dropDownDisplay = () => {
for (i = 0; i < information.length; i++) {
const dropdown = document.querySelector('.dropdown-menu')
if(dropdown.classList.contains('d-none'))
{
dropdown.classList.add('d-block')
dropdown.classList.remove('d-none')
}
else{
dropdown.classList.add('d-none')
dropdown.classList.remove('d-block')
}
const items = document.querySelectorAll('.dropdown-item');
items[i].textContent = `${information[i].gender} ${information[i].age}`;
}
};
const dropdownMenuButton = document.getElementById("dropdownMenuButton");
dropdownMenuButton.addEventListener("click", (event) => dropDownDisplay());
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.