For循環不檢查每個對象的屬性

Question

我有一個問題，我的代碼不檢查所有存儲對象條形碼。我希望它檢查所有的螺栓，支架，螺絲刀和錘子條形碼，並檢查它與輸入一個，如果它相同，然後顯示相應的對象。但它總是適用於最後一個。我不知道是什麼導致了這一點。行數量有多少輸入（可以點擊一個按鈕來添加新的輸入）輸入有名稱輸入1輸入2輸入3 ...等等...

var storage = { 
    bolts: { 
    barcode: 57263144, 
    price: 0.5, 
    name: '100mm Bolts', 
    stock: 8642, 
    }, 
    brackets: { 
    barcode: 13245627, 
    price: 0.2, 
    name: 'Plain Brackets', 
    stock: 5201, 
    }, 
    screwdriver: { 
    barcode: 52678349, 
    price: 15, 
    name: 'Screwdriver', 
    stock: 30, 
    }, 
    hammer: { 
    barcode: 86583916, 
    price: 25, 
    name: 'Hammer', 
    stock: 5, 
    } 
} 

function check(){ 
    Object.keys(storage).forEach(function(key) { 
    for (var i = 1; i <= rowAmount; i++){ 

     var barcodeCheck = document.getElementById("input"+i).value; 

     var input = document.getElementById("input"+i).value; 

     if (input.length > 8){ 
     document.getElementById("input"+i).style.backgroundColor = "red"; 
     } 
     else { 
     document.getElementById("input"+i).style.backgroundColor = "white"; 
     } 


     if (barcodeCheck == storage[key].barcode){ 
     document.getElementById("name"+i).innerHTML = "Name: "+storage[key].name; 
     document.getElementById("price"+i).innerHTML = "Price: £"+storage[key].price+"/one"; 
     document.getElementById("stock"+i).innerHTML = "In stock: "+storage[key].stock; 
     } 
     else { 
     document.getElementById("name"+i).innerHTML = ""; 
     document.getElementById("price"+i).innerHTML = ""; 
     document.getElementById("stock"+i).innerHTML = ""; 
     } 
    } 
    }); 

    setTimeout(check,1); 
} 
check(); 

Answer 1

我想你要找的是for...in 。

你也有這個功能不斷運行。 1ms的調查太過緊張，您的應用程序的性能將會受到影響。

更新：正如我發現的那樣，真正的罪魁禍首（以及下面指出的答案）是，在您檢查了一個鍵並適當地操縱了DOM之後，您繼續檢查。隨後的檢查顯然會失敗，因爲只有一個正確的答案，然後一切都會重置。

爲了闡明，使用forEach循環遍歷密鑰並不是一個不正確的解決方案，儘管使用for...in更清晰並且更適合手頭的任務。

var storage = { 
    bolts: { 
    barcode: 57263144, 
    price: 0.5, 
    name: '100mm Bolts', 
    stock: 8642, 
    }, 
    brackets: { 
    barcode: 13245627, 
    price: 0.2, 
    name: 'Plain Brackets', 
    stock: 5201, 
    }, 
    screwdriver: { 
    barcode: 52678349, 
    price: 15, 
    name: 'Screwdriver', 
    stock: 30, 
    }, 
    hammer: { 
    barcode: 86583916, 
    price: 25, 
    name: 'Hammer', 
    stock: 5, 
    } 
} 

function check(){ 
    var match = false; 

    for (var key in storage) { 
    for (var i = 1; i <= rowAmount; i++) { 
     //barcodeCheck and input had the same value 
     //I also removed the .value. You'll see why in a sec 
     var input = document.getElementById("input"+i); 

     if (input.value.length > 8) { 
     input.style.backgroundColor = "red"; 
     } 
     else { 
     input.style.backgroundColor = "white"; 
     } 

     if (input.value == storage[key].barcode){ 
     document.getElementById("name"+i).innerHTML = "Name: "+storage[key].name; 
     document.getElementById("price"+i).innerHTML = "Price: £"+storage[key].price+"/one"; 
     document.getElementById("stock"+i).innerHTML = "In stock: "+storage[key].stock; 

     match = true; 
     } 
    } 

    if (match) break; 
    } 

    //Only reset if you've checked them all and come up short 
    if (!match) 
    { 
    document.getElementById("name"+i).innerHTML = ""; 
    document.getElementById("price"+i).innerHTML = ""; 
    document.getElementById("stock"+i).innerHTML = ""; 
    } 

    //Nobody's going to notice a 250ms delay in your poll 
    setTimeout(check, 250); 
} 
check(); 

Answer 2

你只看到最後一個是正確的原因是你的for循環是怎麼回事，雖然每一次迭代和檢查，看看是否匹配輸入存儲的值中的一個，雖然for循環，當它不停止運行找到一個匹配。

function check(){ 
outer_loop: 
Object.keys(storage).forEach(function(key) { 
for (var i = 1; i <= rowAmount; i++){ 

    var barcodeCheck = document.getElementById("input"+i).value; 

    var input = document.getElementById("input"+i).value; 

    if (input.length > 8){ 
    document.getElementById("input"+i).style.backgroundColor = "red"; 
    } 
    else { 
    document.getElementById("input"+i).style.backgroundColor = "white"; 
    } 


    if (barcodeCheck == storage[key].barcode){ 
    document.getElementById("name"+i).innerHTML = "Name: "+storage[key].name; 
    document.getElementById("price"+i).innerHTML = "Price: £"+storage[key].price+"/one"; 
    document.getElementById("stock"+i).innerHTML = "In stock: "+storage[key].stock; 
break outer_loop; //This will end the for loop and allow the found values to stay instead of over writing them on the next loop iteration and jump out of both loops 
    } 
    else { 
    document.getElementById("name"+i).innerHTML = ""; 
    document.getElementById("price"+i).innerHTML = ""; 
    document.getElementById("stock"+i).innerHTML = ""; 
    } 
} 
}); 
setTimeout(check,1); 
} 
check(); 

UPDATE：

下面是固定的代碼，會做你在找什麼。你首先要跟着按鍵，你應該首先在輸入框之後去嘗試將它們匹配到按鍵。對不起，多次更新。

<style> 
input { 
    float: left; 
    border: none; 
    border-bottom: 2px solid black; 
    outline: none; 
    font-size: 24px; 
    width: 100%; 
    text-align: center; 
    transition: width cubic-bezier(0.92,0,0.29,0.99) 0.6s; 
    font-family: 'Indie Flower', cursive; 
    font-weight: 900; 
    clear: both; 
} 

.red { 
    color: red; 
} 

* { 
    font-size: 24px; 
    font-weight: 800; 
} 

#table > div { 
    border: 2px solid black; 
    float: left; 
    width: 300px; 
    padding: 5px; 
} 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 

.clear { 
    clear: both; 
} 

button { 
    background-color: orange; 
    border: 2px solid black; 
    padding: 14px 16px; 
    font-size: 14px; 
    cursor: pointer; 
    transition: all 0.4s; 
} 
button:hover { 
    border-radius: 10px; 
    background-color: yellow; 
    transform: translateY(2px); 
} 


</style> 

barcodes: 13245627, 57263144, 52678349, 86583916 <br> 
<input type=number id=barcode placeholder=Barcode> 
<div id=output></div> 
<div id=test></div> 
<button onclick=newRow();>New row</button> 
<button onclick=deleteRow();>Delete last row</button><br><br> 
<div id=table></div> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

<script> 
var storage = { 
    bolts: { 
    barcode: 57263144, 
    price: 0.5, 
    name: '100mm Bolts', 
    stock: 8642, 
    }, 
    brackets: { 
    barcode: 13245627, 
    price: 0.2, 
    name: 'Plain Brackets', 
    stock: 5201, 
    }, 
    screwdriver: { 
    barcode: 52678349, 
    price: 15, 
    name: 'Screwdriver', 
    stock: 30, 
    }, 
    hammer: { 
    barcode: 86583916, 
    price: 25, 
    name: 'Hammer', 
    stock: 5, 
    } 
} 
var rowAmount = 0; 

function display(){ 
    var barcode = document.getElementById("barcode").value; 
    var numbers = []; 
    var sum = 0; 
    for (var i = 0; i < barcode.length; i++){ 
    numbers[i] = barcode.charAt(i); 
    if (i === 0 || i === 2 || i === 4 || i === 6){ 
     numbers[i] = numbers[i] * 3; 
    } 
    sum += parseInt(numbers[i]); 
    } 

    var nearestWhole = Math.ceil(sum/10)*10; 

    var lastDigit = (nearestWhole - sum); 

    var isRight = false; 

    if (barcode.length === 8 && nearestWhole - sum === 0){ 
    isRight = true; 
    } 

    document.getElementById("test").innerHTML = numbers+"<br>Sum: "+sum+"  <br>Is right: "+isRight+"<br>Last digit: "+lastDigit+"<br>Nearest whole:  "+nearestWhole; 

    if (barcode.length > 8){ 
document.getElementById("output").innerHTML = "INVALID"; 
    isRight = false; 
    }  
    if (isRight === false && barcode.length > 7){ 
    document.getElementById("output").innerHTML = "<span class=red>Invalid  barcode</span>" 
    } 
    else { 
    document.getElementById("output").innerHTML = ""; 
    } 

    setTimeout(display,1); 
} 
display(); 

function newRow(){ 
    rowAmount++; 
    var elem5 = '<div id=cellNumber'+rowAmount+'>'; 
    var elem = '<div class=clear></div>'; 
    var elem1 = '<div id=cell'+rowAmount+'><input type=number placeholder=Barcode id=input'+rowAmount+'></div>'; 
    var elem2 = '<div id=name'+rowAmount+'></div>'; 
    var elem3 = '<div id=price'+rowAmount+'></div>'; 
    var elem4 = '<div id=stock'+rowAmount+'></div>'; 
    var elem6 = '</div>' 
    $('#table').append(elem5+elem+elem1+elem2+elem3+elem4+elem6); 
} 
function deleteRow(){ 
    if (rowAmount === 1){ 
    document.getElementById("input1").value = ""; 
    } 
    if (rowAmount > 1){ 
    $('#cellNumber'+rowAmount).remove(); 
    rowAmount--; 
    } 
} 

function check(){ 


//Object.keys(storage).forEach(function(key) { 
outer_loop: 
for (var i = 1; i <= rowAmount; i++){ 
    for(var z=0; z < Object.keys(storage).length;z++){ 
     var key = Object.keys(storage)[z]; 

      var barcodeCheck = document.getElementById("input"+i).value; 

      var input = document.getElementById("input"+i).value; 


      if (input.length > 8){ 
      document.getElementById("input"+i).style.backgroundColor = "red"; 
      } 
      else { 
      document.getElementById("input"+i).style.backgroundColor = "white"; 
      } 


      if (barcodeCheck == storage[key].barcode){ 
      document.getElementById("name"+i).innerHTML = "Name: "+storage[key].name; 
      document.getElementById("price"+i).innerHTML = "Price: £"+storage[key].price+"/one"; 
      document.getElementById("stock"+i).innerHTML = "In stock: "+storage[key].stock; 
      break; //This will end the for loop and allow the found values to stay instead of over writing them on the next loop iteration 
     } 
     else { 
      document.getElementById("name"+i).innerHTML = ""; 
      document.getElementById("price"+i).innerHTML = ""; 
      document.getElementById("stock"+i).innerHTML = ""; 
     } 
    } 
    } 

    //Nobody's going to notice a 250ms delay in your poll 
    setTimeout(check, 250); 
} 
check(); 

newRow(); 
</script>