在 DOM 中動態創建元素后更新它

Question

我創建了一個 li 標簽和 append 到 dom 並在 li 標簽中動態創建 ID 和 innerHTMl。 在此之后，我執行 setInterval() function 期望它檢索動態創建元素的 ID 並在 DOM 中更新其價格。

為什么 setInterval 無法識別創建的 li 標簽的 id，即使它每秒執行一次？

$(function() {

companies = [
      {
          name : 'Apple'
        , symbol : 'AAPL'
        , price : '577'
        , shares : '1'
      }]

  for (var key in companies) {

      var obj = companies[key];
      
      for (var prop in obj) {
      if (prop === 'symbol') {
        symbol = obj[prop]; 
      }
      }
      
      
      const prodEl = document.createElement('div');
      
          prodEl.innerHTML = 
          `
        <li class="stocks">  
        <div class='shares-price'><p id="${symbol}-price">Price: ${obj['price']}</p>
        </li>
        `;

    document.getElementById('stock-list').appendChild(prodEl);

    setInterval(function() {

      for (var key in companies) {
        var obj = companies[key];

        var symbol = '';

        for (var prop in obj) {


          if (prop === 'price') {

              symbol = obj[prop]

            var stockId = symbol + '-' + 'price';
            
            stockId = JSON.stringify(stockId);
                    document.getElementById(stockId).innerHTML = 200;
          }
        }
      }
      
    }, 1000 /* every second */ );



});

Answer 1

您的代碼的問題是您將id設置為symbol-price並且您正在查詢id為price-price的元素。

注意：您可以直接訪問對象的屬性； 如果您知道屬性名稱，則無需循環。

此外，如果您在主循環內執行setInterval ，則stockId變量將自動可用。

例如。

$(function() {
    companies = [
      {
          name : 'Apple'
        , symbol : 'AAPL'
        , price : '577'
        , shares : '1'
      }
    ]

    for (var key in companies) {
        var obj = companies[key];
        var stockId = obj['symbol'] + '-price';

        const prodEl = document.createElement('div');
        prodEl.innerHTML = (
        `
        <li class="stocks">  
            <div class='shares-price'>
                <p id="${stockId}">Price: ${obj['price']}</p>
            </div>
        </li>
        `
        );

        document.getElementById('stock-list').appendChild(prodEl);
        document.getElementById(stockId).innerHTML = 200;
    }

   // set interval outside the main loop
    setInterval(function() {
        for (var key in companies) {
            var obj = companies[key];
            var stockId = obj['symbol'] + '-price';
            document.getElementById(stockId).innerHTML = 200;
        }
    }, 1000)
});