jak z api wstawić text jeden pod drugim

Question

Hej, chciałabym po kliknięciu w button wstawić texty jeden pod drugim. Korzystam z api, ładnie mi się texty pobierają randomowo, ale tylko pojedynczo. Gdy chce stworzyć nowy element (create element), to text jest dalej jeden, a tworzą mi się puste divy (te które dynamicznie tworzę w js). Jak możnaby to zmienić aby do tych pustych dvów wpadały pobrane texty??

const url = 'https://api.icndb.com/jokes/random'
const textJoke = document.querySelector("#joke h3");


//get jokes by button

const button = document.querySelector(".button");
button.addEventListener("click", function () {
    
    createAllSection();
});


// chodzi mi własnie o ten fragment kodu - pobieram tutaj text/żart ale tylko jeden. A gdybym chciała ich więcej?

const getRandomJokes = () => {
    const req = new XMLHttpRequest();
    req.open("GET", url);
    req.onload = function() {
        if (this.status === 200) {
            const value = JSON.parse(this.responseText);
            //random jokes
            const joke = document.querySelector(".joke");
            joke.innerHTML = `<div class="random_joke" id="joke"> 
            <h3> ${value.value.joke} </h3></div>`
            
            wordText() //word's text
            
        }
    }
    req.send();
}

const createAllSection = () => {
    getRandomJokes();
    const jokesArea = document.querySelector(".jokesArea");

    const jokeSection = document.createElement("section");
    jokeSection.classList.add("joke");
    jokesArea.appendChild(jokeSection);

    const lettersSection = document.createElement("section");
    lettersSection.classList.add("letters");
    jokesArea.appendChild(lettersSection);
    

    const letters = document.querySelector(".letters");
    const wordNumberText = document.querySelector(".random_joke h3").textContent.split(" ");

    const wordText = document.createElement("div");
    wordText.classList.add("wordText");
    letters.appendChild(wordText);
    wordText.innerHTML = `<h4>Words:</h4><span>${wordNumberText}</span>`
};

 

Answer 1

joke.innerHTML = `<div class="random_joke" id="joke">

Id nie może być takie same dla wszystkich pobranych elementów. To chyba miało być id pobrane dynamicznie z api?

Twoje api zwraca za każdym razem jeden element, więc wystarczy go dodać do tego co już masz wcześniej pobrane. Nie rozkminiłem Twojej koncepcji, ale w uproszczeniu wygląda to tak:

<button class="button">klik</button>
<div id="joke"></div>

const url = 'https://api.icndb.com/jokes/random';
//get jokes by button
 
const button = document.querySelector(".button");
button.addEventListener("click", function (e) {
     e.preventDefault();
    createAllSection();
});
// chodzi mi własnie o ten fragment kodu - pobieram tutaj text/żart ale tylko jeden. A gdybym chciała ich więcej?
 
const getRandomJokes = () => {
    const req = new XMLHttpRequest();
    req.open("GET", url);
    req.onload = function() {
        if (this.status === 200) {
            const value = JSON.parse(this.responseText);
            //random jokes
            const joke = document.querySelector("#joke");
            joke.innerHTML += `<div class="random_joke" id=${value.value.id}>
            <p>id=${value.value.id}</p>
            <h3> ${value.value.joke} </h3></div>`;      
        }
    }
    req.send();
}
 
const createAllSection = () => {
    getRandomJokes();
};

 

Comments

Dziękuję bardzo :)