Append function not working correctly on DOM - Jquery

Brad
November 28, 2022
273 views
0 votes
2 Answers

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>

Answers

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 class="inStock">' + n.name + ': ' + n.price 
   + 
  '</p>');
  }
 if (n.inStock == false) {
  //$('p').addClass('notInStock');
  $('#appendToMe').append('<p class="notInStock">' + 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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Append function not working correctly on DOM – Jquery

Answers