charmy :
In my array of objects, each person has a set of information with an image. All of this information is inside of a div called imagebox. Now I want to add a button for each person in the array. Currently my code is creating multiple buttons instead of one per each object in my array. I attached an image to show what the page currently looks like. Like my image shows I have buttons outside the white div and also multiple. I just want one button inside of that white div per person, but I don't understand what I'm doing wrong with my for loop.
Here is my image: enter image description here
HTML
<body onload="printBtn();">
<div id="selectmenu">
<select id="gender" onchange="checkGender()">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<input type="text" id="search">
<div id="imagescontainer"></div>
<div id="text"></div>
<div id="imagebox"></div>
</body>
JAVASCRIPT
var people = [
{
title: "davisss1",
name: "Jeslyn Davis",
gender: "male",
age: 25,
profileDescription: "I recently moved from New York, I'm looking forward to meeting new people.",
status: "Single",
hasKids: "No",
wantsKids: "No",
religion: "Prefer not to say",
typeOfRelationship: "Long-term",
city: "Kansas City",
state: "Missouri",
favSport: "softball",
favDrink: "coke",
favIceCream: "cookies-n-cream",
favFood: "gelato",
favMusic: "pop",
imgs: "images/jeslyn.jpeg"
},
{
title: "chlogib",
name: "Chloe Gibbs",
gender: "female",
age: 24,
profileDescription: "I'm currently running my own bakery so if you're every in town and want to get a bite let me know. I also work part time ",
status: "Single",
hasKids: "No",
wantsKids: "Yes",
religion: "Nonreligious",
typeOfRelationship: "Long-term",
city: "Louisville",
state: "Kentucky",
favSport: "volleyball",
favDrink: "ice-tea",
favIceCream: "mango",
favFood: "cookies",
favMusic: "rock",
imgs: "images/chloe.jpeg"
}
]
function checkGender() {
var genderSelected = document.getElementById("gender").value;
var allimages = document.getElementById("imagescontainer");
var text = document.getElementById("text");
allimages.innerHTML = "";
text.innerHTML = "";
if (genderSelected == "male") {
for (var i = 0; i < people.length; i++) {
if (people[i].gender == "male") {
var content = `<div id="imagebox">` + `<img src="` + people[i].imgs + `" id="allimages"/>` + `<div id="text">` + `Title: ` + people[i].title + `<br\>` + `Name: ` + people[i].name + `<br\>` + `Age: ` + people[i].age + `<br\>` + `Description: ` + people[i].profileDescription + `<br\>` + `Status: ` + people[i].status + `<br\>` + `Has kids: ` + people[i].hasKids + `<br\>` + `Want kids: ` + people[i].wantsKids + `<br\>` + `Religion: ` + people[i].religion + `<br\>` + `Type of relationship: ` + people[i].typeOfRelationship + `<br\>` + `City: ` + people[i].city + `<br\>` + `State:` + people[i].state + `<br\>` + `Favorite sport: ` + people[i].favSport + `<br\>` + `Favorite drink: ` + people[i].favDrink + `<br\>` + `Favorite ice-cream flavor: ` + people[i].favIceCream + `<br\>` + `Favorite food: ` + people[i].favFood + `<br\>` + `Favorite music: ` + people[i].favMusic + `<br\>` + `</div>` + `</div>`;
allimages.innerHTML += content;
text.innerHTML += content;
function createButtons() {
for (var i = 0; i < people.length; i++) {
document.getElementById("imagebox").innerHTML += "<button>" + people[i] + "</button>";
}
}
createButtons();
}
}
} else {
for (var i = 0; i < people.length; i++) {
if (people[i].gender == "female") {
var content = `<div id="imagebox">` + `<img src="` + people[i].imgs + `"id="allimages"/>` + `<div id="text">` + `Title: ` + people[i].title + `<br\>` + `Name: ` + people[i].name + `<br\>` + `Age: ` + people[i].age + `<br\>` + `Description: ` + people[i].profileDescription + `<br\>` + `Status: ` + people[i].status + `<br\>` + `Has kids: ` + people[i].hasKids + `<br\>` + `Want kids: ` + people[i].wantsKids + `<br\>` + `Religion: ` + people[i].religion + `<br\>` + `Type of relationship: ` + people[i].typeOfRelationship + `<br\>` + `City: ` + people[i].city + `<br\>` + `State:` + people[i].state + `<br\>` + `Favorite sport: ` + people[i].favSport + `<br\>` + `Favorite drink: ` + people[i].favDrink + `<br\>` + `Favorite ice-cream flavor: ` + people[i].favIceCream + `<br\>` + `Favorite food: ` + people[i].favFood + `<br\>` + `Favorite music: ` + people[i].favMusic + `<br\>` + `</div>` + `</div>`;
allimages.innerHTML += content;
text.innerHTML += content;
function createButtons() {
for (var i = 0; i < people.length; i++) {
document.getElementById("imagebox").innerHTML += "<button>" + people[i] + "</button>";
}
}
createButtons();
}
}
}
}
Benjamin James Kippax :
It's not clear exactly what you want the buttons to do, so I've just added the name of the person as the text for now.
I've added a codepen https://codepen.io/benwritescode/pen/BaNwoXB
HTML
I did away with the multiple divs, they seemed superfluous to your requirements.
<html>
<head><!-- RE-ADD YOUR CSS&JS REFS --></head>
<body>
<div id="selectmenu">
<select id="gender" onchange="checkGender()">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<input type="text" id="search">
<div id="people"></div>
</body>
</html>
JS
I've explained what's going on in the comments of the JS.
let people = [
{
title: "davisss1",
name: "Jeslyn Davis",
gender: "male",
age: 25,
profileDescription: "I recently moved from New York, I'm looking forward to meeting new people.",
status: "Single",
hasKids: "No",
wantsKids: "No",
religion: "Prefer not to say",
typeOfRelationship: "Long-term",
city: "Kansas City",
state: "Missouri",
favSport: "softball",
favDrink: "coke",
favIceCream: "cookies-n-cream",
favFood: "gelato",
favMusic: "pop",
imgs: "images/jeslyn.jpeg"
},
{
title: "chlogib",
name: "Chloe Gibbs",
gender: "female",
age: 24,
profileDescription: "I'm currently running my own bakery so if you're every in town and want to get a bite let me know. I also work part time ",
status: "Single",
hasKids: "No",
wantsKids: "Yes",
religion: "Nonreligious",
typeOfRelationship: "Long-term",
city: "Louisville",
state: "Kentucky",
favSport: "volleyball",
favDrink: "ice-tea",
favIceCream: "mango",
favFood: "cookies",
favMusic: "rock",
imgs: "images/chloe.jpeg"
}
];
// This is the HTML template which will be used for each person.
const PERSONTEMPLATE = `
<div class="imagebox">
<img src="[[IMAGE]]" image="images" />
<div class="text">
Title: [[TITLE]]<br>
Name: [[NAME]]<br>
Age: [[AGE]]<br>
Description: [[DESCRIPTION]]<br>
Status: [[STATUS]]<br>
Has kids: [[HASKIDS]]<br>
Want kids: [[WANTSKIDS]]<br>
Religion: [[RELIGION]]<br>
Type of relationship: [[LOOKINGFOR]]<br>
City:[[CITY]]<br>
State:[[STATE]]<br>
Favorite sport: [[FAVSPORT]]<br>
Favorite drink: [[FAVDRINK]]<br>
Favorite ice-cream flavor: [[FAVICECREAM]]<br>
Favorite food: [[FAVFOOD]]<br>
Favorite music: [[FAVMUSIC]]<br>
</div>
<button>[[BUTTONTEXT]]</button>
</div>`;
// Fired on-change
function checkGender() {
// Get the selected gender
let genderSelected = document.getElementById("gender").value;
// get the div to add the html to.
let peopleDiv = document.getElementById("people");
// Create a variable to which each appropriately gendered persons' HTML will be added to.
let htmlToBuild = '';
// Get the people by the selected gender using filter(), then use forEach to loop through each person in the returned array.
people
.filter(person => person.gender == genderSelected)
.forEach(function(person) {
// Gets the template and replaces the placeholder snippets.
// += appends to a string.
htmlToBuild += PERSONTEMPLATE
.replace('[[IMAGE]]',person.imgs)
.replace('[[TITLE]]',person.title)
.replace('[[NAME]]',person.name)
.replace('[[AGE]]',person.age)
.replace('[[DESCRIPTION]]',person.profileDescription)
.replace('[[STATUS]]',person.status)
.replace('[[HASKIDS]]',person.hasKids)
.replace('[[WANTSKIDS]]',person.wantsKids)
.replace('[[RELIGION]]',person.religion)
.replace('[[LOOKINGFOR]]',person.typeOfRelationship)
.replace('[[CITY]]',person.city)
.replace('[[STATE]]',person.state)
.replace('[[FAVSPORT]]',person.favSport)
.replace('[[FAVDRINK]]',person.favDrink)
.replace('[[FAVICECREAM]]',person.favIceCream)
.replace('[[FAVFOOD]]',person.favFood)
.replace('[[FAVMUSIC]]',person.favMusic)
.replace('[[BUTTONTEXT]]',person.name);
});
// Add the new HTML to the div.
peopleDiv.innerHTML = htmlToBuild;
}
The code here has a good separation of concerns and is readable. You can update your HTML template independently of replacing any values within it. There are no duplicate pieces of code (male + female for loops), just one array filter and one foreach.