Question

我试图制作一个用户可以插入自己喜欢的啤酒的列表。必须检查＆＃34; userinput＆＃34;已经在数组中.. 我的想法如下：循环遍历beersArray并检查数组中是否有与用户输入的值相同的值。如果有，则提醒并且不要添加。如果没有，则将用户输入添加到列表项。

＆＃13;

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));
            }
        }
    }
});

＆＃13;

<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>

＆＃13;

Answer 1

代码中存在多个问题

应该在处理程序之外声明数组，否则每次单击都会创建一个新的处理程序
应使用输入值填充数组，而不是使用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>

Answer 2

如果你在同一个数组中循环，那么第二个for循环将不再必要。

投入“if-else”的正确方法。 for循环中的语句可以按如下方式完成：

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));
}

如果没有工作Javascript的for循环

2 个答案: