CODEWITHSUNDEEP
javascripthtmljquerysetinterval
Matt Laszcz
Matt Laszcz

Reputation: 409

Updating an element after it has already been dynamically created in the DOM

I create an li tag and append it to the dom and in the li tag I dynamically create the ID and innerHTMl. After this, I execute a setInterval() function expecting it to retrieve the ID of the dynamically created element and update its price in the DOM.

Why is the setInterval not recognizing the created li tag's id even though it executes every second?

$(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 */ );



});

Upvotes: 1

Views: 457

Answers (1)

Mohamed Mufeed
Mohamed Mufeed

Reputation: 1570

The issue with your code is you set the id as symbol-price and you are querying for the element with id price-price.

Note: you can access an object’s property directly; there is no need for looping if you know the property name.

Also if you are executing setInterval inside the main loop the stockId variable will be available automatically.

eg.

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

Upvotes: 1

Related Questions