for循环，if else不工作Javascript

for loop with if else not working Javascript

本文关键字：工作 Javascript else if 循环 for      更新时间：2024-01-26

我正在尝试创建一个列表，用户可以在其中插入他们最喜欢的啤酒。必须检查"userinput"是否已经在数组中。。我的想法如下：循环遍历beersArray，检查数组中是否有与用户输入的值相同的值。如果有，请发出警报，不要添加。如果没有，则将用户输入添加到列表项中。

var submitBier = document.getElementById("submitbeer");
submitBier.addEventListener("click", function(){
    event.preventDefault();
    var beersArray = [];
    var beer = document.getElementById("favobeer");
    var beerList = document.getElementById("listwithbeer");
    var beerLi = document.createElement("LI");
    var BeerName = document.createTextNode(beer.value);
    var i;
    var j;
    for (j = 0; j < beersArray.length; j++) {
        if (beersArray[j] === beer.value) {
            alert("This beer is already in the list");
        } else {
            for (i = 0; i < beersArray.length; i++) {
                beersArray[i].className = 'beer';
                beerLi.appendChild(BeerName);
                beerList.appendChild(beerLi);
                beersArray.push(beerList.appendChild(beerLi));
            }
        }
    }
});
<div class="beers">
    <h1 id="vraagnaam">add your favourite beers</h1>
    <input type="text" id="favobeer"  value = "" />
    <button id="submitbeer" type="submit" value="Submit" >add</button>
    <ul id="listwithbeer"></ul>
</div>

代码中存在多个问题

  • 数组应该在处理程序之外声明，否则每次单击都会创建一个新的处理程序
  • 数组应该填充输入值，而不是appendChild()返回的值
  • 可以使用indexOf检查当前值是否存在于数组中

所以

var beersArray = [];
var submitBier = document.getElementById("submitbeer");
var beer = document.getElementById("favobeer");
var beerList = document.getElementById("listwithbeer");
submitBier.addEventListener("click", function() {
  event.preventDefault();
  var value = beer.value.trim();
  if (beersArray.indexOf(value) == -1) {
    var beerLi = document.createElement("LI");
    var BeerName = document.createTextNode(value);
    beerLi.appendChild(BeerName);
    beerList.appendChild(beerLi);
    beersArray.push(value);
  } else {
    alert("This beer is already in the list");
  }
});
<div class="beers">
  <h1 id="vraagnaam">add your favourite beers</h1>
  <input type="text" id="favobeer" value="" />
  <button id="submitbeer" type="submit" value="Submit">add</button>
  <ul id="listwithbeer"></ul>
</div>

如果在同一个数组中循环，则不需要第二个for循环。

在for循环中放入"if-else"语句的正确方法如下：

for (var j = 0; j < beersArray.length; j++) {
    // A If-conditional statement to short-circuit existing beer list
    if (beersArray[j] === beer.value) alert ('This beer is already in the list')
    // Core Logic
    beersArray[j].className = 'beer';
    beerLi.appendChild(BeerName);
    beerList.appendChild(beerLi);
    beersArray.push(beerList.appendChild(beerLi));
}
相关文章：