How to get information from divs contained within another element in Javascript?

Question

I am currently trying to implement a modal that displays information based on the event-card it is called from. Here is the HTML code, showing one event-card as an example:

<div class="event-card upcoming hackathon">
  <div class="row">
    <button type="button" class="col-md-12 modal-button" data-toggle="modal"
     data-target="#exampleModal" data-name="&ltinterstell/Her&gt">
       <div style="display:inline-flex; margin-left: -10px">
         <div class="col-md-4  event_bg">
           <img src="img/logos/interstellher.png" alt="" class="img-fluid event_thumbnail">
         </div>
         <div class="col-md-8 mt-sm-20 left-align-p" style="margin-left: -15px">
           <h3 style="font-weight:bold">&ltinterstell/Her&gt</h3>
           <p class="event-info">
             The &ltinterstell/her&gt hackathon is an 8-hour event... 
           </p>
          <div class="events-time-place">
             <div class="events-date">
               <i class="fa fa-calendar-o fa-events-icon" aria-hidden="true"></i>
               <p style="margin-left: 10px">February 6-7, 2021</p>
             </div>
             <div class="events-place">
               <i class="fa fa-map-marker fa-events-icon"></i>
               <p style="margin-left: 10px">Virtual over Zoom</p>
             </div>
           </div>
         </div>
       </div>
     </button>
  </div>
</div>

And the Javascript code which triggers the modal (taken from Bootstrap):

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    console.log(button)
    var recipient = button.data('name') // Extract info from data-* attributes
    var img = button.querySelect("event_thumbnail")
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text(recipient)
    modal.find('.modal-subtitle').text(recipient)
    modal.find('.modal-body input').val(recipient)
  })

The code triggers the modal successfully but I'm not sure how to display the information from the HTML code. I want to display the same event title, image, p description, and time/place information. My Javascript code currently retrieves the button which triggers the modal but how do I retrieve the information in the following divs as well?

Answer 1

You can use .find() method to get all other values ie: button.find('.event-info').text() this will give you event info value where button has been clicked and then add them inside your modal.

Demo Code :

 $('#exampleModal').on('show.bs.modal', function(event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('name') //get other values using.find.. var sub_title = button.find('.event-info').text() var place_date = button.find('.events-date p').text() var event_place = button.find('.events-place p').text() var modal = $(this) modal.find('.modal-title').text(recipient) modal.find('.modal-subtitle').text(sub_title) modal.find('.modal-body p').html(place_date + "<br>" + event_place) })

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="event-card upcoming hackathon"> <div class="row"> <button type="button" class="col-md-12 modal-button" data-toggle="modal" data-target="#exampleModal" data-name="&ltinterstell/Her&gt"> <div style="display:inline-flex; margin-left: -10px"> <div class="col-md-4 event_bg"> <img src="img/logos/interstellher.png" alt="" class="img-fluid event_thumbnail"> </div> <div class="col-md-8 mt-sm-20 left-align-p" style="margin-left: -15px"> <h3 style="font-weight:bold">&ltinterstell/Her&gt</h3> <p class="event-info"> The hackathon is an 8-hour event... </p> <div class="events-time-place"> <div class="events-date"> <i class="fa fa-calendar-o fa-events-icon" aria-hidden="true"></i> <p style="margin-left: 10px">February 6-7, 2021</p> </div> <div class="events-place"> <i class="fa fa-map-marker fa-events-icon"></i> <p style="margin-left: 10px">Virtual over Zoom</p> </div> </div> </div> </div> </button> </div> </div> <div class="event-card upcoming hackathon"> <div class="row"> <button type="button" class="col-md-12 modal-button" data-toggle="modal" data-target="#exampleModal" data-name="&ltinterstell/Her&gt"> <div style="display:inline-flex; margin-left: -10px"> <div class="col-md-4 event_bg"> <img src="img/logos/interstellher.png" alt="" class="img-fluid event_thumbnail"> </div> <div class="col-md-8 mt-sm-20 left-align-p" style="margin-left: -15px"> <h3 style="font-weight:bold">&ltinterstell/Her&gt</h3> <p class="event-info"> The hackathon is an 3-hour event... </p> <div class="events-time-place"> <div class="events-date"> <i class="fa fa-calendar-o fa-events-icon" aria-hidden="true"></i> <p style="margin-left: 10px">February 6-17, 2021</p> </div> <div class="events-place"> <i class="fa fa-map-marker fa-events-icon"></i> <p style="margin-left: 10px">Virtual over Zoom1</p> </div> </div> </div> </div> </button> </div> </div> <div id="exampleModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <;-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title"></h4> <h3 class="modal-subtitle"></h3> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

Use a closure to hang onto the information you want to display. Generally speaking, what you're describing here is better handled by storing your data in a different location. While what you describe is achievable through only the use of DOM selector functions, it would be preferable to retrieve the data you want in a data structure, instead of using HTML to do it. This isn't what HTML is designed for.

If you do something like the following

function applyModalOnclick(element, title, image, description, whenWhere){ // put your arguments into an object
    element.onclick = () => {
        element.querySelector("modal-title").innerHTML = Title
        element.querySelector("modal-subtitle").innerHTML = Description
        element.querySelector("modal-body-input").value = "Put something here"
    }
}

This accomplishes what you want without any of the jankiness of pulling data out of HTML. HTML really isn't designed to do what you're asking it to do, which is why you're having trouble figuring out how to do it.

HTML should provide structure to your to the visual layer of your project, while JS should handle data storage and manipulation.

If you really want to put all of your data in one place, I would recommend implementing a class to store it all, assign event handlers, and manage the state of your modal.