如何检查所有输入值是否等于我的数据？

如何解决如何检查所有输入值是否等于我的数据？

我的数组中有 32 个项目，它们都具有以下属性：id、word、image。用户必须猜测所有图像中的内容并将他们的猜测写在输入中（因此总共有 32 个输入）。我需要检查输入是否等于我的数组属性“word”，然后当点击一个按钮时（输入提交，我所有的图片和输入都在一个表单中）显示一些文本，例如 “哎呀！再猜一次” 如果错了，“是的！你猜对了” 如果是对的。文本应出现在每个输入的下方。我使用 forEach 显示了所有图片和输入，并且我正在为此页面使用 bulma 框架：

const wordBox = info.forEach((words) => {
  mainColumns.innerHTML += `
  <div class="column is-one-quarter">
  <div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src=${words.image} alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <input class="input" id="text" type="text" placeholder="Įvesk žodį">
      </div>
    </div>
    <div class="content">
      Content
    </div>
    </div>
  </div>
  </div>`;
});

有什么想法吗？ 这是它的样子（结果应该出现在内容位置）

解决方法

你可以做的是用输入值中的单词过滤单词数组。然后检查长度是否为零，不匹配，如果长度大于一，则匹配。

const status = wordBox.filter(item => item.word === inputWord)

,

像这样

我使用更改而不是单击按钮

const info = [
{word:"flower",image:"flower.gif"},{word:"boat",image:"boat.gif"}
];

const mainColumns = document.getElementById("mainColumns");
mainColumns.innerHTML = info.map(({image,word}) => 
`<div class="column is-one-quarter">
  <div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src=${image} alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <input class="input" data-word="${word}" type="text" placeholder="Įvesk žodį">
        <span class="correct hide">Yay</span>
        <span class="wrong hide">NOO</span>
      </div>
    </div>
    <div class="content">
      Content
    </div>
    </div>
  </div>
  </div>`).join("");
mainColumns.addEventListener("change",function(e) {
   const correct = [...mainColumns.querySelectorAll("[data-word]")].map(input => {
     if (input.value) {
       const correct = input.value === input.dataset.word;
       parent = input.closest("div");
       parent.querySelector(".correct").classList.toggle("hide",!correct)
       parent.querySelector(".wrong").classList.toggle("hide",correct);
       return correct ? 1 : 0;
     }
     else return 0;
     }).reduce((a,b)=>a+b);
   document.getElementById("correct").innerText = correct;
})

#mainColumns { display:flex; }
.hide { display: none; }

<div id="mainColumns"></div>
Correct: <span id="correct"></span>

,

我倾向于将对象和 HTML 分开，将 HTML 绑定到对象，反之亦然。这意味着要为数组元素添加更多属性。

let info = [{
  image: 'flower.png',word: 'flower',content: '',guess: ''
}];

function bindWords() {
  info.forEach((words) => {
    mainColumns.innerHTML = `
  <div class="column is-one-quarter">
  <div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src=${words.image} alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <input class="input" data-word="${words.word}" type="text" placeholder="Įvesk žodį" value="${words.guess}">
      </div>
    </div>
    <div class="content">
      ${words.content}
    </div>
    </div>
  </div>
  </div>`;
  });
}

bindWords();
check.addEventListener('click',() => {
  info = Array.from(document.querySelectorAll('.card')).map(el => ({
    image: el.querySelector('img').src,word: el.querySelector('.input').dataset.word,guess: el.querySelector('.input').value,content: el.querySelector('.input').value === el.querySelector('.input').dataset.word ? 
      'Correct' : 'Incorrect'
  }));
  bindWords();
});

<div id="mainColumns"></div>
<button id="check">Check Answers</button>