• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jak z api wstawić text jeden pod drugim

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
417 wizyt
pytanie zadane 8 maja 2019 w JavaScript przez aniaska4 Obywatel (1,010 p.)

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>`
};

 

1 odpowiedź

+1 głos
odpowiedź 8 maja 2019 przez pablop76 VIP (123,460 p.)
wybrane 9 maja 2019 przez aniaska4
 
Najlepsza
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();
};

 

komentarz 9 maja 2019 przez aniaska4 Obywatel (1,010 p.)
Dziękuję bardzo :)

Podobne pytania

+1 głos
3 odpowiedzi 2,219 wizyt
0 głosów
1 odpowiedź 91 wizyt
pytanie zadane 11 października 2023 w HTML i CSS przez osqarek Nowicjusz (140 p.)
0 głosów
3 odpowiedzi 768 wizyt
pytanie zadane 20 maja 2020 w HTML i CSS przez marsoonn Początkujący (460 p.)

93,095 zapytań

142,056 odpowiedzi

321,504 komentarzy

62,437 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...