Why is my Javascript loop coming back undefined? How to select object with for loop

Question

So I'm creating a web page in which the user will type in their zodiac sign to get a daily reading. I'm having trouble declaring the result of plugging in the user's value in the loop.

I'm getting undefined. What I'm guessing is that I didn't correctly define which object was the result of the loop. I feel like I'm missing one line of code and I've spent the past day crying over it lol.

So as you see below the for loop, it will take the resulting object from said loop and plug its string data into some css styled tags in my html. What am I missing?

function getInfo() {
    var zodiacReading =[
    {
        sign: "aries",
        icon: "../img/aries.png",
        reading: "Awesome at Javascript, Bowling, and not working out"
    },
    {
        sign: 'cancer',
        icon: "../img/cancer.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'sagittarius',
        icon: "../img/sagittarius.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'pisces',
        icon: "../img/pisces.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'capricorn',
        icon: "../img/capricorn.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'libra',
        icon: "../img/libra.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'aquarius',
        icon: "../img/aquarius.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'gemini',
        icon: "../img/gemini.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'taurus',
        icon: "../img/pisces.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'scorpio',
        icon: "../img/scorpio.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'leo',
        icon: "../img/leo.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
    {
        sign: 'virgo',
        icon: "../img/virgo.png",
        reading: '<p>Awesome at Javascript, Bowling, and not working out</p> '
    },
];
    var zodiac = document.getElementById('zodiac').value.toLowerCase()


    for (i = 0; i < zodiacReading.length; i++) {
    if (zodiac == zodiacReading[i].sign) {
        document.getElementById("sign").innerHTML = zodiacReading[i].sign.textContent
        document.getElementById("icon").src = zodiacReading[i].icon.textContent
        document.getElementById("reading").innerHTML = zodiacReading[i].reading.textContent
        }
    }

}

Answer 1

a few minor errors, try:

for (var i = 0; i < zodiacReading.length; i++) {
    if (zodiac === zodiacReading[i].sign) {
        document.getElementById("sign").innerHTML = zodiacReading[i].sign;
        document.getElementById("icon").src = zodiacReading[i].icon;
        document.getElementById("reading").innerHTML = zodiacReading[i].reading;
        }
    }

}

Answer 2

Those .textContent pieces are causing errors. If you remove those your code should work.

I can't see your exact HTML structure, but here's a running example:

 function getInfo() { var zodiacReading = [{ sign: "aries", icon: "../img/aries.png", reading: "Awesome at Javascript, Bowling, and not working out" }, { sign: 'cancer', icon: "../img/cancer.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'sagittarius', icon: "../img/sagittarius.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'pisces', icon: "../img/pisces.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'capricorn', icon: "../img/capricorn.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'libra', icon: "../img/libra.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'aquarius', icon: "../img/aquarius.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'gemini', icon: "../img/gemini.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'taurus', icon: "../img/pisces.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'scorpio', icon: "../img/scorpio.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'leo', icon: "../img/leo.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, { sign: 'virgo', icon: "../img/virgo.png", reading: '<p>Awesome at Javascript, Bowling, and not working out</p> ' }, ]; var zodiac = document.getElementById('zodiac').value.toLowerCase(); for (i = 0; i < zodiacReading.length; i++) { if (zodiac == zodiacReading[i].sign) { document.getElementById("sign").innerHTML = zodiacReading[i].sign; document.getElementById("icon").src = zodiacReading[i].icon; document.getElementById("reading").innerHTML = zodiacReading[i].reading; } } } 

 <select id="zodiac" onchange="getInfo()"> <option value="aries">aries</option> <option value="cancer">cancer</option> <option value="sagittarius">sagittarius</option> <option value="pisces">pisces</option> <option value="capricorn">capricorn</option> <option value="libra">libra</option> <option value="aquarius">aquarius</option> <option value="gemini">gemini</option> <option value="taurus">taurus</option> <option value="scorpio">scorpio</option> <option value="leo">leo</option> <option value="virgo">virgo</option> </select> <div id="sign"></div> <img id="icon"></div> <div id="reading"></div> 

Answer 3

Well...

textContent is undefined in your zodiacReading objects, you should remove it

do something like:

for (var i = 0; i < zodiacReading.length; i++) {
    if (zodiac == zodiacReading[i].sign) {
        document.getElementById("sign").innerHTML = zodiacReading[i].sign;
        document.getElementById("icon").src = zodiacReading[i].icon;
        document.getElementById("reading").innerHTML = zodiacReading[i].reading;
        break;
    }
}

Another things is that you probably want to break from the loop after you find the correct sign.

Check out this working fiddle