How can i display a information to a overlay div "onclick"

Question

Info: I have a table that stores the following information of each worker (name,Short description,Image of Person,Position in the company (such as CEO, Project Manager, Developer) Social Network Links: Github,Linkedin,Xing,Facebook).

php: i have a div parent called wrapper and inside i have 2child div( one for the table with the worker info, and the idea with the second div(class="info") is to overlay the table with the information of the selected worker.)

$query = new WP_Query( $args );
if ($query->have_posts()) :

    echo '<div class"wrapper"><div><table >';
    echo  '<tr>
    <th>NAME</th>
    <th>IMAGE</th>
    <th>POSITION</th>
    <th>MORE INFO</th>
  </tr>';
    while ($query->have_posts()) : $query->the_post();
    $name = get_post_meta( get_the_ID(), '_overview_worker_key', true )['name'] ?? '';
    $image = get_post_meta( get_the_ID(), '_overview_worker_key', true )['image'] ?? '';
    $position = get_post_meta( get_the_ID(), '_overview_worker_key', true )['position'] ?? '';
    $description = get_post_meta( get_the_ID(), '_overview_worker_key', true )['description'] ?? '';
    $Linkedin = get_post_meta( get_the_ID(), '_overview_worker_key', true )['Linkedin'] ?? '';
    $github = get_post_meta( get_the_ID(), '_overview_worker_key', true )['github'] ?? '';
    $xing = get_post_meta( get_the_ID(), '_overview_worker_key', true )['xing'] ?? '';
    $facebook = get_post_meta( get_the_ID(), '_overview_worker_key', true )['facebook'] ?? '';
    echo '<tr class="ov-worker--table" ><td>'.$name.'</td><br/><td>'.$image.'</td><br/><td>'.$position.'</td><br/><td><button type="button"  onclick="populateOverlay('.$name.','.$description.','.$facebook.')">More Info!</button></td></tr>';
    endwhile;
    echo '</table>
    <div id="info"></div>
    </div></div>';


endif;
wp_reset_postdata();

scss:

.wrapper {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    //z-index: 2;
}
#info {
    display: none;
    position: absolute;
    width: 25%;
    height: 25%;
    top: 0;
    right: 0;
    font-size: 12px;
    color: rgb(128, 20, 20);
    background-color: rgba(119, 107, 107, 0.5);
}

js:

function populateOverlay(name, desc, social) {

    var overlay = document.getElementById("info");
  overlay.style.display = "block"; 
  overlay.innerHTML = "<div>"+name+"</div><div>"+desc+"</div><div>"+social+"</div>"; 

} 

function off() {
    var overlay= document.getElementById("info");
  overlay.style.display= "none";
} 

PROBLEM: on click i recieve the following error in my google chrome console(Uncaught SyntaxError: missing ) after argument list). and when i click on the error this is where it comes from

  </tr><tr class="ov-worker--table" ><td>LUKO</td><br/><td></td><br/><td>Cleaner</td><br/><td><button type="button"  onclick="populateOverlay(LUKO,he does notihng,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>AMINE</td><br/><td>carlomagno.PNG</td><br/><td>CEO</td><br/><td><button type="button"  onclick="populateOverlay(AMINE,TRAVAJADOR,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>Juan</td><br/><td>fotoperfil.jpg</td><br/><td>Cleaner</td><br/><td><button type="button"  onclick="populateOverlay(Juan,he does notihng,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>ryan gold</td><br/><td></td><br/><td>PNP</td><br/><td><button type="button"  onclick="populateOverlay(ryan gold,another worker in the room,NONE)">More Info!</button></td></tr><tr class="ov-worker--table" ><td>Andrew</td><br/><td>IMG_20190909_171228.jpg</td><br/><td>CEO</td><br/><td><button type="button"  onclick="populateOverlay(Andrew,The hardest worker in the room,https://www.facebook.com/andrew.9?ref=bookmarks)">More Info!</button></td></tr></table>

and at the end the error says populateOverlay is not defined,this error appears when i click any (more info button) its if when i click a button it fiels the information of every worker to the button. maybe because of the while loop??.

Answer 1

I would first write a JavaScript function to populate the overlay:

function populateOverlay(name, desc, social) {
    var overlay = document.getElementsByClassName("info");
    overlay.innerHTML = "<div>"+name+"</div><div>"+desc+"</div><div>"+social+"</div>";
}

I would then change the onclick event for the button to trigger this new function. So change from this:

echo '<tr id="ov-worker--table" ><td>'.$name.'</td><br/><td>'.$image.'</td><br/><td>'.$position.'</td><br/><td><button type="button">More Info!</button></td></tr>';

to something like this:

echo '<tr class="ov-worker--table" ><td>'.$name.'</td><br/><td>'.$image.'</td><br/><td>'.$position.'</td><br/><td><button type="button" onclick=javascript:populateOverlay("'.$name.'","'.$description.'", "'.$facebook.'")>More Info!</button></td></tr>';

Notice that I've changed the id= "ov-worker--table" to class= "ov-worker--table" as you should only have one instance of any ID on your page, not multiple copies.

I've just picked Facebook as an example in my code, but you could also add in LinkedIn, Github and Xing (perhaps adding some logic first to check if they've been filled in).