Döngü çalışmıyorsa, Javascript

Question

Kullanıcıların en sevdikleri birayı yerleştirebilecekleri bir liste yapmaya çalışıyorum. "userinput" zaten dizide olup olmadığını bir kontrol olması gerekir .. Düşüncelerim aşağıdaki gibiydi: beersDaha boyunca döngü ve dizide bir kullanıcı olup olmadığı ile aynı değer olup olmadığını kontrol edin. uyarı var ve eklemeyin. Değilse, kullanıcı girdisini bir liste öğesine ekleyin.

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>

Answer 1

dizi işleyicisi dışında beyan edilmelidir

• kodunda birden problemler başka her tıklama yeni bir işleyici oluşturur vardır
• dizi olmalıdır appendChild()
• tarafından döndürülen değerle değil, giriş değeriyle doldurulur. Bir kullanım indexOf akım değeri aynı döngü, döngü için bir 2 gerekli olmayacaktır

Yani

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

dizisinde mevcut olup olmadığını kontrol etmek dizi.

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