Bardzo nowy w JavaScript tutaj, zaledwie dwa dni, ale postanowiłem rozpocząć dość ambitny projekt za pomocą JavaScript i Firebase.

Poniżej próbuję uczynić JavaScript z Firestore do HTML, ale jak prawdopodobnie możesz zobaczyć, tworzy 4 h5. Idealnie, mam cały tekst wewnątrz jednego H5, ale ładnie sformatowany.

Oto mój javascript (znowu zacząłem uczyć się tego dwa dni temu, więc jestem bardzo nowy)

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

function renderResult(doc){
    let li = document.createElement('li');

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

    let name = document.createElement ('h5');
    name.className = ('data-text');
    let age = document.createElement ('h5');
    age.className = ('data-text');
    let type = document.createElement ('h5');
    type.className = ('data-text');
    let price = document.createElement ('h5');
    price.className = ('data-text');

    li.setAttribute('data-id', doc.id);
    name.textContent = doc.data().name;
    age.textContent = doc.data().age;
    type.textContent = doc.data().type;
    price.textContent = doc.data().price;

    resultList.appendChild(li);
        li.appendChild(resultDiv);
            resultDiv.appendChild(resultImage);
            resultDiv.appendChild(resultFooter);
                resultFooter.appendChild(resultText);
                resultFooter.appendChild(resultButton);
                    resultText.appendChild(name);
                    resultText.appendChild(type);
                    resultText.appendChild(age);
                    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);
});

I oto to, co mam nadzieję osiągnąć w HTML

<ul id="horseList" role="list" class="result-list">
    <li>
      <div class="result">
        <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>
          </div><a href="imagelinkhere" target="_blank" class="button tiny w-button">View</a></div>

Zaktualizowany kod:

        let lineone = document.createElement ('h5');
    lineone.className = ('data-text');
    let linetwo = document.createElement ('h5');
    linetwo.className = ('data-text');


    li.setAttribute('data-id', doc.id);
    lineone.textContent = ${doc.data().name}, ${doc.data().age}, ${doc.data().type}; 
    linetwo.textContent = ${doc.data().price};

Każda pomoc byłaby świetna! Dzięki!

0
Bailey Fisher 25 czerwiec 2020, 04:04

2 odpowiedzi

Najlepsza odpowiedź

Możesz połączyć wszystkie połączenia danych do pojedynczej zmiennej łańcucha za pomocą literałów szablonów, a następnie ustawić tę zmienną do zawartości tekstu w elemencie H5:

const string = `${doc.data().name}, ${doc.data().age} | ${doc.data().type}`;

let h5 = document.createElement('h5');

h5.textContent = string; 
1
Pavlos Karalis 25 czerwiec 2020, 01:25

Jak się masz? Możesz spróbować użyć literałów szablonów, tworząc tylko jeden H5 na 3 nazwę atrybutów, wiek, typ: fraze.textcontent = ${doc.data().name}, ${doc.data().age} ${doc.data().type}

0
Alice Arruda Atalla 25 czerwiec 2020, 01:30