Display CSS GRID with Javascript & DOM

Question

I am trying to create a number of DOM item's using data from my firebase Firestore, however upon running, I have an error in line 34. I am just not quite sure what I should append resultGrid to, to achieve what I am looking for.

  <div class="w-layout-grid grid">
    <div class="result div-block">
      <div class="data-image"></div>
      <div class="result-footer">
        <div class="results-text">
          <h5 class="data-text">Taffy, 8 | Arabian</h5>
          <h5 class="data-text">$12,000</h5>

This is my current javascript.

const resultList = document.querySelector('#horseList') 

function renderResult(doc){
    var resultGrid = document.createElement('div');
    resultGrid.className = ('w-layout-grid grid');

    var resultDiv = document.createElement('div');
    resultDiv.className = ('result');

    var resultImage = document.createElement('div');
    resultImage.className = ('data-image');

    var resultFooter = document.createElement('div');
    resultFooter.className = ('result-footer');

    var resultText = document.createElement('div');
    resultText.className = ('results-text');

    var resultButton = document.createElement('button');
    resultButton.className = ('button tiny w-button');
    resultButton.innerHTML = "View";

    //Render text from database inside H5
    const string = (`${doc.data().name}, ${doc.data().age} | ${doc.data().type}`);
    let resultOne = document.createElement('h5');
    let price = document.createElement('h5');
    resultOne.className = ('data-text');
    price.className = ('data-text');
    price.textContent = (`$${doc.data().price}`);
    resultOne.textContent = string;

    resultList.appendChild(resultGrid);
        resultGrid.appendChild(resultDiv);
            resultDiv.appendChild(resultImage);
            resultDiv.appendChild(resultFooter);
                resultFooter.appendChild(resultText);
                resultFooter.appendChild(resultButton);
                    resultText.appendChild(resultOne);
                    resultText.appendChild(price);
}

//connect to database & get data
const db = firebase.firestore();
db.collection("Horses").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        renderResult(doc);
    });
})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});

Thanks in advance!

Post the error message you encountered so its easier for us to help! — Tanner Dolby
– Tanner Dolby, Commented Jun 26, 2020 at 1:59
Just updated the code, not getting an error but it's making two div's both with grid's when in reality I want one grid div, and I want it to populate the div's with the class "result" within that grid. — Bailey Fisher
– Bailey Fisher, Commented Jun 26, 2020 at 2:07
Ok. That is more clear. I will post an answer shortly unless someone beats me to it! — Tanner Dolby
– Tanner Dolby, Commented Jun 26, 2020 at 2:10

Bailey Fisher · Accepted Answer · 2020-06-26 02:19:31Z

I figured it out! I ended up making the div GRID statically in HTML then I just set javascript to create the dynamic div's within that grid!

HTML

<div id="horseList" class="w-layout-grid grid"></div>

Javascript

const resultList = document.querySelector('#horseList') 

function renderResult(doc){
    var resultDiv = document.createElement('div');
    resultDiv.className = ('result');
    resultDiv.setAttribute('data-id', doc.id);

    var resultImage = document.createElement('div');
    resultImage.className = ('data-image');

    var resultFooter = document.createElement('div');
    resultFooter.className = ('result-footer');

    var resultText = document.createElement('div');
    resultText.className = ('results-text');

    var resultButton = document.createElement('button');
    resultButton.className = ('button tiny w-button');
    resultButton.innerHTML = "View";

    //Render text from database inside H5
    const string = (`${doc.data().name}, ${doc.data().age} | ${doc.data().type}`);
    let resultOne = document.createElement('h5');
    let price = document.createElement('h5');
    resultOne.className = ('data-text');
    price.className = ('data-text');
    price.textContent = (`$${doc.data().price}`);
    resultOne.textContent = string;

        resultList.appendChild(resultDiv);
            resultDiv.appendChild(resultImage);
            resultDiv.appendChild(resultFooter);
                resultFooter.appendChild(resultText);
                resultFooter.appendChild(resultButton);
                    resultText.appendChild(resultOne);
                    resultText.appendChild(price);
}

Collectives™ on Stack Overflow

Display CSS GRID with Javascript & DOM

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related