为什么我的Javascript循环返回时未定义?如何使用为循环选择对象

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

本文关键字：循环 何使用 选择 对象 未定义 我的 Javascript 返回 为什么      更新时间：2023-09-26

所以我正在创建一个网页，用户将在其中键入他们的黄道十二宫来获取每日读数。我在声明在循环中插入用户值的结果时遇到了问题。

我变得不确定了。我猜测的是，我没有正确定义哪个对象是循环的结果。我觉得我错过了一行代码，过去的一天我都在为它哭泣，哈哈。

因此，正如您在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
        }
    }
}

一些小错误，请尝试：

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

那些.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>

嗯。。。

textContent是您的zodiacReading对象中的undefined，您应该将其删除

做一些类似的事情：

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

另一件事是，你可能想在找到正确的符号后打破循环

看看这个工作小提琴

相关文章：