Click here to Skip to main content
15,907,687 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
here is my sample code
<body>
    <div id="root">
   <div class ="product" data-item-id="product">
    <img src="assets/images/iphone-se.jpeg" class="product__image">
    <h3 class="product__name">...</h3>
    <p class="product__description">...</p>
    <h4 class="product__price">...</h4>
    <div class="product__tags"> 
    
     red
    blue
    black</div>
   </div>
</div>

    <script src="assets/data.js"></script>
    <!-- defer specifies that the script is executed when the page has finished parsing. -->
    <script src="assets/index.js" defer></script>
    <!-- Example of an inline script  -->
    <script>
        // Start executing the script when the document loads
        // Here we are adding an event listener which watches to DOM 
        // and fires the callback function when the html is parsed without 
        // waiting for any scripts
        document.addEventListener('DOMContentLoaded', () => {
            console.log('Rendering All Cards ....');
            // Render products
            renderAllCards(productList);
        });
        console.log(productList);
    </script>
</body>


this is my data.js file code

const productList = [
  {
    id: 1,
    name: 'PlayStation 5',
    description: 'Next generation PlayStation from Sony packing the latest AMD Zen CPUs',
    image: 'assets/images/ps5.jpeg',
    price: 39999,
    memory: '8 GB',
    storage: '2 TB',
    colors: ['blue', 'black', 'red']
  },
  {
    id: 2,
    name: 'PlayStation 4',
    description: 'Last generation PlayStation from Sony with older generation Intel CPUs',
    image: 'assets/images/ps4.jpeg',
    price: 29999,
    memory: '4 GB',
    storage: '1 TB',
    colors: ['yellow', 'black', 'red']
  },];
window.productList = productList;


What I have tried:

i am stuck please help
function renderAllCards(card) {
  // First select the root element
  const renderRoot= document.querySelectorAll("#root"); 
  //const container1 = document.querySelectorAll("productList") 
  // First remove existing children so that we don't append to the 
  // existing list. DO NOT remove this
  //const renderRoot ='card';
  renderRoot.innerHTML = 'card';
 
  

  // Now iterate over the list passed as a param to render all the cards

    // Create a card element by calling createProduct method, passing the list
    // item as a parameter

    // Append that child
     //renderRoot.appendChild(card);

}
Posted
Updated 14-Sep-22 22:37pm

1 solution

querySelectorAll returns a collection of all nodes matching the selector:
Document.querySelectorAll() - Web APIs | MDN[^]

To return a single node, use querySelector:
Document.querySelector() - Web APIs | MDN[^]
JavaScript
const renderRoot= document.querySelector("#root");
Or, since you're selecting an element by its id, use getElementById:
Document.getElementById() - Web APIs | MDN[^]
JavaScript
const renderRoot= document.getElementById("root");
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900