為什么我的Javascript循環未定義回來？ 如何使用for循環選擇對象

Question

因此，我正在創建一個網頁，用戶將在其中輸入他們的十二生肖以獲取每日閱讀量。 我在聲明循環中插入用戶值的結果時遇到麻煩。

我變得不確定。 我想的是，我沒有正確定義哪個對象是循環的結果。 我感覺好像缺少了一行代碼，而過去的一天我一直在哭泣，哈哈。

因此，正如您在for循環下面看到的那樣，它將從所述循環中獲取結果對象，並將其字符串數據插入到我的html中的某些CSS樣式的標簽中。 我想念什么？

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

一些小錯誤，請嘗試：

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

這些.textContent片段導致錯誤。 如果刪除這些代碼，則代碼應該可以正常工作。

我看不到您的確切HTML結構，但這是一個正在運行的示例：

 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

好...

在zodiacReading對象中undefined textContent ，應將其刪除

做類似的事情：

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;
    }
}

另一件事是，您可能希望在找到正確的符號后脫離循環。

看看這個工作的小提琴