时间戳

首页 > 解决方案 > 当我将我的值返回到 html 时出现问题，1 没有定义？

javascript - 当我将我的值返回到 html 时出现问题，1 没有定义？

问题描述

我收到一个未定义 1 的错误，有人知道为什么吗？我似乎找不到我的错误。错误是关于：document.getElementById("return_data").innerHTML = BeerData[retu][1];

var BeerData = [
  ["Jupiler", 5.2],
  ["Cristal", 5],
  ["Stella Artois", 5.2],
  ["GOUDEN CAROLUS CLASSIC", 8.5],
  ["GOUDEN CAROLUS TRIPEL", 9],
  ["GOUDEN CAROLUS WHISKY INFUSED", 11.7],
  ["Duvel", 8.5],
  ["Duvel Tripel Hop", 9.5]
];

for (i = 0; i < BeerData.length; i++) {
  document.getElementById("drinkList").innerHTML += "<option value='" + BeerData[i][0] + "'>" + BeerData[i][0] +"</option>";
}

function Button() {
  var retu;
  for (i = 0; i < BeerData.length; i++) {
    if (BeerData[i][1] == document.getElementById("drinkList").value) {
      retu = i;
    }
  }

  //return BeerData[retu][1];
  document.getElementById("return_data").innerHTML = BeerData[retu][1];
}
<button onclick="Button()"> Verzenden </button>

<!-- drink -->
<div class="form1">
  <input type="text" name="drink" id="drink" list="drinkList" autocomplete="off" required>
  <label for="drink" class="label-drink" >
    <span class="content-drink">Welke Drank?</span>
  </label>
 
  <datalist id="drinkList">   
  </datalist>
</div>

<p id="return_data"></p>

标签： javascripthtml

解决方案

这里有两个问题：

  1. 通过比较if (BeerData[i][1] == document.getElementById("drinkList").value)，您不会比较每个元素的正确BeerData元素。您已经option使用valuefrom创建了每个BeerData[i][0]，但随后尝试将其与之进行比较BeerData[i][1]。
  2. 通过相同的比较if (BeerData[i][1] == document.getElementById("drinkList").value)，您还尝试value使用 ID 获取元素的drinkList，这是datalist元素，而不是input您希望获得的值。相反，您应该定位已分配IDvalue的元素的属性。drink

var BeerData = [
  ["Jupiler", 5.2],
  ["Cristal", 5],
  ["Stella Artois", 5.2],
  ["GOUDEN CAROLUS CLASSIC", 8.5],
  ["GOUDEN CAROLUS TRIPEL", 9],
  ["GOUDEN CAROLUS WHISKY INFUSED", 11.7],
  ["Duvel", 8.5],
  ["Duvel Tripel Hop", 9.5]
];

for (i = 0; i < BeerData.length; i++) {
  document.getElementById("drinkList").innerHTML += "<option value='" + BeerData[i][0] + "'>" + BeerData[i][0] + "</option>";
}

function Button() {
  var retu;
  for (i = 0; i < BeerData.length; i++) {
    if (BeerData[i][0] == document.getElementById("drink").value) {
      retu = i;
    }
  }

  //return BeerData[retu][1];
  document.getElementById("return_data").innerHTML = BeerData[retu][1];

}
<html>

<head>
</head>

<body>

  <button onclick="Button()"> Verzenden </button>

  <!-- drink -->
  <div class="form1">
    <input type="text" name="drink" id="drink" list="drinkList" autocomplete="off" required>
    <label for="drink" class="label-drink">
                <span class="content-drink">Welke Drank?</span>
            </label>
    <datalist id="drinkList">   
            </datalist>
  </div>
  <p id="return_data"></p>
</body>

推荐阅读