How can I render the data inside the cards by clicking the button? Please Help

JavaScript
1

I’m trying to show the details of news inside the card when i click on the button but it’s showing at the end of the page after clicking the button.

image
image1587×686 148 KB 

fetch('https://newsapi.org/v2/everything?q=tesla&apiKey=).then(function(response) {
        console.log(response, 'Response');
        return response.json();
    }).then(newsData)
    .catch(function(err) {
        console.log(err);
    });;

function newsData(obj) {
    let newsArray = obj.articles;
    console.log(newsArray);
    console.log(typeof newsArray);
    document.getElementById("main-container").innerHTML = (newsArray.map(news =>
        `
    
      <div class="main">
      <div class="content">
      <img  src="${news.urlToImage}" />
        <button id = "btnMore" onclick= "getElementById('moreInfo').innerHTML='author: ${news.author}<br> news title: ${news.title}<br> news description ${news.description}  '" >  More Details </button>
     </div> 
    </div>`
    ).join(''));
}
2

my html file

<h1>News Application</h1>
    <div id="main-container"></div>
    <div id="app"></div>
    <div id="moreInfo"></div>

    <script src="app.js"></script>
3

you are saying here where to add it, which is the #main-container element?

4

@ilenia But how can I render my data inside the cards after clicking on the button? I used more info to get the info by clicking the button.

5

Please don’t ping random users to drag them into threads. People will help as they are able and have time.

1 Like
6

where is the code that add the news details?

7

@ILM Can you please help me write the logic to add the news details?

8

show me what you have tried and we will start from there

9

@ILM I already mentioned my JS logic in the post. Please check.

10

I’m checking it, but please tell, what is happening? what should happen instead?
and where is the #more-info element? it’s going to be added there, because that’s what you have written

12

@ilenia

I put more info inside the button.

13

you have created #more-info in your html element, there you are just telling to put stuff in it when the button is pressed, it’s doing exactly what you have written

14

Here is one option. Add the details data to each .content element in the map. Put it inside an element and then show/hide the element using a class based on the button click. If you put the element below the button you can use event.target.nextElementSibling to target the element to show/hide.

15

@lasjorg It would be better if you mentioned it in my code instead of the explanation for the better understanding.

16

We still generally don’t write code for others on this forum. I think you may have been told this once or twice. Is there a particular part of that description you don’t understand? What did you try? Did it work? If not, how so?

17

So here’s your function with comments:

function newsData(obj) {

      ...

      <div class="content">
      <img  src="${news.urlToImage}" />

                                        <!-- instead of getElementById,  -->
                                        <!-- use the method that lasjorg suggested  -->
        <button id = "btnMore" onclick= "getElementById('moreInfo').innerHTML='author: ${news.author}<br> news title: ${news.title}<br> news description ${news.description}  '" >  More Details </button>
 
        <!-- add a div/p/whatever element here with the text you want to display  -->

     </div> 
    </div>`
    ).join(''));
}
18

As said, you should post your code so we can see what you have tried. If I just post the code it will be a disservice to you. If after we have worked through your code you still need an example I can post some code.

19

@lasjorg I already posted my code… please check my initial question.

20

I’m talking about any new code you have based on my suggestions.

21

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.