How I do renderallcards function and inside of it first find the element with `id=”root”` using document.queryselector.

Question

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 14-Sep-22 7:48am

Prakash Bhagora

Updated 14-Sep-22 22:37pm

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Answer 1 · 2022-09-14T22:37:00

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");

How I do renderallcards function and inside of it first find the element with `id=”root”` using document.queryselector.

1 solution

Solution 1

Add your solution here

Preview 0

How I do renderallcards function and inside of it first find the element with `id=”root”` using document.queryselector.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us