Append function not working correctly on DOM-CodePudding

I'm currently learning about the DOM and jQuery different ways to work them. I was asked to put the following information under the (#appendToMe) div: Put the (inStock: true) items in the (.inStock ) class and the (inStock: false) items in the (.notInStock) class. It looks like everything is correct but the output is not the right colors.

const storeItems = [
  {
    name: 'TV',
    price: 800.00,
    inStock: true
  },
  {
    name: 'Phone',
    price: 700.00,
    inStock: false
  },
  {
    name: 'Game Console',
    price: 300.00,
    inStock: true
  },

  {
    name: 'Smart Watch',
    price: 200.00,
    inStock: false
  },
];


storeItems.forEach(function(n, i, a) {
  if (n.inStock == true) {
    $('p').addClass('inStock');
    $('#appendToMe').append('<p>'   n.name   ': '   n.price   '</p>');
  }
  if (n.inStock == false) {
    $('p').addClass('notInStock');
    $('#appendToMe').append('<p>'   n.name   ': '   n.price   ' Not in stock'   '</p>');
  }
})

.inStock, .notInStock {
  padding: 10px;
  margin: 10px 0;
  font-family: Helvetica;
}

.inStock {
  background-color: #79f;
}

.notInStock {
  background-color: #eff;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="appendToMe">
    </div>
    <script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

CodePudding user response：

You can simply add classes to your created p tags with javascript. what is error: errors is that you are selecting $('p') it is selecting all rendered p tag element so why your code doesnot works. Example:

const storeItems = [
  {
    name: 'TV',
    price: 800.00,
    inStock: true
  },
  {
    name: 'Phone',
    price: 700.00,
    inStock: false
  },
  {
    name: 'Game Console',
    price: 300.00,
    inStock: true
  },

  {
    name: 'Smart Watch',
    price: 200.00,
    inStock: false
  },
];


storeItems.forEach(function(n, i, a) {
  if (n.inStock == true) {
   //$('p').addClass('inStock');
   $('#appendToMe').append('<p >'   n.name   ': '   n.price 
     
  '</p>');
  }
 if (n.inStock == false) {
  //$('p').addClass('notInStock');
  $('#appendToMe').append('<p >'   n.name   ': '   
  n.price   ' Not in stock'   '</p>');
  }
})

.inStock, .notInStock {
  padding: 10px;
  margin: 10px 0;
  font-family: Helvetica;
}

.inStock {
  background-color: #79f;
}

.notInStock {
  background-color: #eff;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="appendToMe">
    </div>
    <script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

CodePudding user response：

Your problem is css query selector is wrong. Because you use $('p'). But in the forEach loop, you render many 'p' tags, and the DOM will return the first 'p' element it found. The second thing is you should append 'p' element first after use DOM select to get it. Try the js code below the fix your issues:

const storeItems = [
        {
            name: 'TV',
            price: 800.00,
            inStock: true
        },
        {
            name: 'Phone',
            price: 700.00,
            inStock: false
        },
        {
            name: 'Game Console',
            price: 300.00,
            inStock: true
        },

        {
            name: 'Smart Watch',
            price: 200.00,
            inStock: false
        },
    ];


    storeItems.forEach(function (n, i, a) {
        const id = Date.now();
        if (n.inStock == true) {
            $('#appendToMe').append(`<p id="${id}-${i}">`   n.name   ': '   n.price   '</p>');
            $(`p#${id}-${i}`).addClass('inStock');
        }
        if (n.inStock == false) {
            $('#appendToMe').append(`<p id="${id}-${i}">`   n.name   ': '   n.price   ' Not in stock'   '</p>');
            $(`p#${id}-${i}`).addClass('notInStock');
        }
    })

<style>
    .inStock,
    .notInStock {
        padding: 10px;
        margin: 10px 0;
        font-family: Helvetica;
    }

    .inStock {
        background-color: #79f;
    }

    .notInStock {
        background-color: #eff;
    }
</style>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="appendToMe">
    </div>
    <script src="https://code.jquery.com/jquery-3.5.0.slim.min.js"
        integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>

</html>