I'm trying to display information I received from a class I created called cardbox, there are six of them, and I can't figure out where I'm going wrong. I think it is where I created dogbreed it doesn't see it as an array but idk any help would be appreciated.
var dogNames = document.getElementsByClassName("cardbox-header");
var dogBreed = document.getElementsByClassName("content-breed");
var textBreed = "<ul>";
var breed;
//Look for Males in the array with the cardbox gender and breed descriptions
for(var k=0;k<dogBreed.length;k++)
{
breed = dogBreed.substring(0,4);
if (breed == "Male")
{
textBreed += "<li>" + dogNames[k].textContent + "</li>";
}
else
{
textBreed += "<li>" + dogNames[k].textContent + "</li>";
}
}
textBreed += "/ul";
// THE CODE FOR DISPLAYING A LIST OF MALE DOGS
document.getElementById("info-maleDogs").innerHTML = textBreed;
//THE CODE FOR DISPLAYING A LIST OF FEMALE DOGS
document.getElementById("info-femaleDogs").innerHTML = textBreed;
I fixed the code, I added another array that stores the gender of the dogs. Took away the female part and wrote that into its own code but it's a copy of what I'm going to show and then changed the display code.
var genderCells=[];
var l=0;
for(var k=0;k<dogBreed.length;k++)
{
genderCells[l] = dogBreed[k].textContent.substring(0,4);
if (genderCells[l] == "Male")
{
textBreedM += "<li>" + dogNames[k].textContent + "</li>";
document.getElementById("info-maleDogs").innerHTML = textBreedM;
l++;
}
}
textBreedM += "/ul";