如何遍历数组匹配用户输入并输出对应值？代码问题咨询

先给你修正后的完整代码，能实现输入'fanta'时输出对应的商品名和价格：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <input type="text" id="sok" />
  <button id="sjekkVare" onclick="vareSok()">Trykk her for å sjekke</button>
  <p id="resultat"></p>
  <script>
    const prisArr = [
      { vare: 'pepsi', pris: 30 },
      { vare: 'fanta', pris: 27 },
      { vare: 'escada', pris: 108 },
      { vare: 'dahls', pris: 69 },
      { vare: 'karsk', pris: 200 },
    ];

    function vareSok() {
      // 获取输入框的值，去除首尾空格
      const inpVare = document.getElementById('sok').value.trim();
      const resultatEl = document.getElementById('resultat');
      // 默认显示未找到提示
      resultatEl.innerHTML = `Fant ikke varen ${inpVare}!`;

      for (let i = 0; i < prisArr.length; i++) {
        // 移除if后的分号，确保条件判断生效
        if (inpVare === prisArr[i].vare) {
          // 获取对应商品的价格
          const pris = prisArr[i].pris;
          resultatEl.innerHTML = `Varen med navn ${inpVare} koster ${pris} kroner!`;
          // 找到匹配项后跳出循环，避免多余遍历
          break;
        }
      }
    }
  </script>
</body>
</html>

原代码的问题说明： #

• 未获取输入值：原函数里的inpVare变量未定义，必须通过document.getElementById('sok').value获取用户输入内容
• if语句末尾多了分号：这会导致条件判断失效，不管输入是否匹配，都会执行后续DOM修改代码
• 未定义pris变量：需要从匹配的数组项中取出对应pris属性值
• 无未匹配处理逻辑：添加默认提示，让用户清楚输入的商品不存在
• 未终止多余遍历：找到目标项后用break跳出循环，提升执行效率

另外，也可以用更简洁的数组方法find实现，代码逻辑更直观：

function vareSok() {
  const inpVare = document.getElementById('sok').value.trim();
  const resultatEl = document.getElementById('resultat');
  // 查找第一个匹配的商品项
  const matchedItem = prisArr.find(item => item.vare === inpVare);

  if (matchedItem) {
    resultatEl.innerHTML = `Varen med navn ${matchedItem.vare} koster ${matchedItem.pris} kroner!`;
  } else {
    resultatEl.innerHTML = `Fant ikke varen ${inpVare}!`;
  }
}

find方法会遍历数组，返回第一个符合条件的元素，找不到则返回undefined，无需手动处理循环终止逻辑。

内容的提问来源于stack exchange，提问作者Marius Fredriksen