Use JQuery Event handler to display JSON data

Hello!
I followed an online tutorial to use a JQuery event handler click event to initiate an alert() to show hard coded data. I was able to get it to work. However, I need to use it to display job descriptions that I have pulled in via JSON. I am using HTML cards that contain the job title, company name, etc. I cannot get my button to show up on the card no matter what I try. Instead my button is at the very bottom and not contained inside the cards. What am I missing?

Also, why is nothing happening when I click on my button? When you click on the button, I want it to show the job description. All of this data is supplied via an API and in JSON format. Any guidance would be appreciated. Thanks!! Here is my codepen:
https://codepen.io/CodeDuchess/pen/jRRvgy

First, it looks like you need to add code to your JavaScript file to include a button with the elements that are appended to your cards. Something like:

const btn = document.createElement('BUTTON');
 btn.innerHTML = "Click Me";
card.appendChild(btn);

Those appended buttons will need to have your onclick function attached to them rather than the button rendered by your html (which you probably don’t need). You may want to give the buttons a class. You won’t be able to assign the same id to more than 1 button.

Hopefully this helps. Good luck with your project!

1 Like

I was typing out button instead of btn – didn’t even think of that possibility. Your solution worked! Thank you so much! Have a great day!

1 Like

You’re welcome. The const variable btn could just as easily be button or balogna or anything you like, as long as you continue to refer to it by the same name. :wink:

Since you are generating each card, just append a button child to the card.

If you install the listener on card, a click on the button will bubble up and take the context of that card. There is your event target.

Dear mtf, Thank you!

1 Like

Played around a little with the framework, and a tiny bit with the script.

    const btn = document.createElement('button');
    btn.textContent = "Click Me";  
       
    const p = document.createElement('p');
    p.textContent = `${job.description.substring(0, 300)}...`; 

Removed the whole ‘card’ div from the HTML…

<!DOCTYPE html>
<html lang="en">
<head> 
  <title>JQuery Testing</title>     
 </head>
   <body>     
    <!-- DIV FOR CARD DISPLAY -->
      <div id="root"></div>     
     <!-- CARD -->
     <div class="container-fluid"></div>                       
   </body>
</html>

Just clocking through, not at nitty gritty level, yet.

Where I did the most damage is the CSS…

/* SEARCH BAR STYLING HERE */
#root {
  max-width: 1200px;
  margin: 0 auto;
}
body{
  background: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem !important;
}     
/* STYLING FOR JS CARD LAYOUT */  
* {
  box-sizing: border-box
}
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Dosis', sans-serif;
  line-height: 1.6;
  color: #696969;
  background: white;
  font-size: 100%;
  margin: 0;
  padding: 0;
}
h2 {
  text-align: center;
  /*padding: 1.5rem 2.5rem;*/
  line-height: 4em;
  background-color: #e1edeb;
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  color: #696969;
}
h3, h4, h5  {
  width: 95%;
  margin: 0.5rem auto;
  text-align: left;
}    
button {
  position: absolute;
  border-radius: 10px;
  line-height: 2.5rem;
  top: 1.5rem;
  right: 1.1em;  
  margin-bottom: 2rem;
  font-size: larger;
  text-shadow: 1px 1px #099;
}
p {
  width: 95%;
  margin: 1rem auto;
}
.container-fluid{
  display: flex;
  flex-wrap: wrap;
}
.card {
  position: relative;
  margin: 1rem;
  background:#eff4f3;
  /*box-shadow: 2px 4px 25px;*/
  box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
  border-radius: 20px;
  overflow: hidden;
  transition: all .2s linear;
}
.card:hover {
  box-shadow: 2px 4px 25px;
  /*box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
  transform: translate3D(0, -2px, 0);*/
}
@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}
@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}
.card:nth-child(2n) h1 {
  background-color: #e1edeb;
  color: #696969;
}
.card:nth-child(4n) h1 {
  background-color: #e1edeb;
  color: #696969;
}
.card:nth-child(5n) h1 {
  background-color #e1edeb;
  color: #696969;
}    
label {
  display: block;
  line-height: 1.5em;
}
ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
li {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
}    

Well, not damage, really. I tidied up.

I may be among a small number of users who do not respond well to jumps in the display. The transform rule got struck. I also reversed the shadow to appear on the current focus item. It made more sense to me and blended in better with my movement sensitivity.

card_with_button

https://codepen.io/mtf/pen/KLKrLv