javascript - 来自 getElementById 的随机图像不适用于多个过滤器

Question

我有一个名为quotes的大数组，其中包含值，我试图根据文章部分的过滤器显示该查询中的随机图像，并在每次单击按钮时显示一个新的随机图像。现在，这适用于 randomIR、randomMR 和 randomFR，但我的其他后续过滤器(如 randomIS)不适用于

const btn = document.querySelector("#btnSearch");

function GetValue() {
  var quotes = [{
        name: "Airplane",
        artic: ["medialR", "Rair", "medialP", "medialL", "finalN",
          img: "/img/airplane.png",
        },
        {
          name: "Ring",
          artic: ["initialR", "finalNG", "CVC", "syl1"],
          img: "/img/ring.png",
        },
        {
          name: "Soccer",
          artic: ["initialS", "medialK", "finalR", "Rer", "syl2"],
          img: "/img/soccer.png",
        },
        {
          name: "Gas",
          artic: ["initialG", "finalS", "CVC", "syl1"],
          img: "/img/emojibase/gas.png",
        },
        {
          name: "House",
          artic: ["syl1", "finalS", "CVC"],
          img: "/img/emojibase/house.png",
        }
      ];

      {
        const quotesIR = quotes.filter(x => x.artic.includes("initialR"));
        const quotesMR = quotes.filter(x => x.artic.includes("medialR"));
        const quotesFR = quotes.filter(x => x.artic.includes("finalR"));

        var randomIR = quotesIR[Math.floor(Math.random() * quotesIR.length)];
        var randomMR = quotesMR[Math.floor(Math.random() * quotesMR.length)];
        var randomFR = quotesFR[Math.floor(Math.random() * quotesFR.length)];

        document.getElementById("IRtarget").src = randomIR.img;
        document.getElementById("MRtarget").src = randomMR.img;
        document.getElementById("FRtarget").src = randomFR.img;
      };

      {
        const quotesIS = quotes.filter(x => x.artic.includes("initialS"));
        const quotesMS = quotes.filter(x => x.artic.includes("medialS"));
        const quotesFS = quotes.filter(x => x.artic.includes("finalS"));

        var randomIS = quotesIS[Math.floor(Math.random() * quotesIS.length)];
        var randomMS = quotesMS[Math.floor(Math.random() * quotesMS.length)];
        var randomFS = quotesFS[Math.floor(Math.random() * quotesFS.length)];

        document.getElementById("IStarget").src = randomIS.img;
        document.getElementById("MStarget").src = randomMS.img;
        document.getElementById("FStarget").src = randomFS.img;
      };

      btn.addEventListener("click", () => {
        GetValue();
      });

<div class="containerINITIAL" align="center">
  <br>
  <img id="IRtarget" src="/img/icons/rtest.png">
</div>
</div>
<div class="col-xs-4">
  <div class="containerMEDIAL" align="center">
    <br>
    <img id="MRtarget" src="/img/icons/rtest.png">
    <br>
    <button id="btnSearch" align="center" onclick="GetValue();">New Words</button>
  </div>
</div>
<div class="col-xs-4">
  <div class="containerFINAL" align="center">
    <br>
    <img id="FRtarget" src="/img/icons/rtest.png">
  </div>

  <div class="containerINITIAL" align="center">
    <br>
    <img id="IStarget" src="/img/icons/stest.png">
  </div>
</div>
<div class="col-xs-4">
  <div class="containerMEDIAL" align="center">
    <br>
    <img id="MStarget" src="/img/icons/stest.png">
    <br>
    <button id="btnSearch" align="center" onclick="GetValue();">New Words</button>
  </div>
</div>
<div class="col-xs-4">
  <div class="containerFINAL" align="center">
    <br>
    <img id="FStarget" src="/img/icons/stest.png">
  </div>

Answer 1

这对我来说是错误的，因为没有“medialS”条目。发生这种情况是因为代码尝试索引空数组中的条目。为了安全起见，您应该在尝试使用过滤器之前测试它们的结果。例如

const quotesIR = quotes.filter(x => x.artic.includes("initialR"));
if (quotesIR.length) {
    var randomIR = quotesIR[Math.floor(Math.random() * quotesIR.length)];
    document.getElementById("IRtarget").src = randomIR.img;
}

我添加了一个“medialS”条目以使下面的代码正常工作，并在“finalN”后面添加了一个右括号。

const btn = document.querySelector("#btnSearch");

function GetValue() {
  var quotes = [{
          name: "Airplane",
          artic: ["medialR", "Rair", "medialP", "medialL", "finalN"],
          img: "/img/airplane.png",
        },
        {
          name: "Ring",
          artic: ["initialR", "finalNG", "CVC", "syl1"],
          img: "/img/ring.png",
        },
        {
          name: "Soccer",
          artic: ["initialS", "medialK", "finalR", "Rer", "syl2"],
          img: "/img/soccer.png",
        },
        {
          name: "Gas",
          artic: ["initialG", "finalS", "CVC", "syl1"],
          img: "/img/emojibase/gas.png",
        },
        {
          name: "House",
          artic: ["medialS","syl1", "finalS", "CVC"],
          img: "/img/emojibase/house.png",
        }
      ];

        const quotesIR = quotes.filter(x => x.artic.includes("initialR"));
        const quotesMR = quotes.filter(x => x.artic.includes("medialR"));
        const quotesFR = quotes.filter(x => x.artic.includes("finalR"));

        var randomIR = quotesIR[Math.floor(Math.random() * quotesIR.length)];
        var randomMR = quotesMR[Math.floor(Math.random() * quotesMR.length)];
        var randomFR = quotesFR[Math.floor(Math.random() * quotesFR.length)];

        document.getElementById("IRtarget").src = randomIR.img;
        document.getElementById("MRtarget").src = randomMR.img;
        document.getElementById("FRtarget").src = randomFR.img;

        const quotesIS = quotes.filter(x => x.artic.includes("initialS"));
        const quotesMS = quotes.filter(x => x.artic.includes("medialS"));
        const quotesFS = quotes.filter(x => x.artic.includes("finalS"));

        var randomIS = quotesIS[Math.floor(Math.random() * quotesIS.length)];
        var randomMS = quotesMS[Math.floor(Math.random() * quotesMS.length)];
        var randomFS = quotesFS[Math.floor(Math.random() * quotesFS.length)];

        document.getElementById("IStarget").src = randomIS.img;
        document.getElementById("MStarget").src = randomMS.img;
        document.getElementById("FStarget").src = randomFS.img;
      };

<div class="containerINITIAL" align="center">
  <br>
  <img id="IRtarget" src="/img/icons/rtest.png">
</div>
</div>
<div class="col-xs-4">
  <div class="containerMEDIAL" align="center">
    <br>
    <img id="MRtarget" src="/img/icons/rtest.png">
    <br>
    <button id="btnSearch" align="center" onclick="GetValue();">New Words</button>
  </div>
</div>
<div class="col-xs-4">
  <div class="containerFINAL" align="center">
    <br>
    <img id="FRtarget" src="/img/icons/rtest.png">
  </div>

  <div class="containerINITIAL" align="center">
    <br>
    <img id="IStarget" src="/img/icons/stest.png">
  </div>
</div>
<div class="col-xs-4">
  <div class="containerMEDIAL" align="center">
    <br>
    <img id="MStarget" src="/img/icons/stest.png">
    <br>
    <button id="btnSearch" align="center" onclick="GetValue();">New Words</button>
  </div>
</div>
<div class="col-xs-4">
  <div class="containerFINAL" align="center">
    <br>
    <img id="FStarget" src="/img/icons/stest.png">
  </div>