how can i take data from php to js

Question

So i have some custom attributes that defines a worker,the idea is to echo the name image and position attribute,and i have already done that.Now on click i want to display a small overlay that shows the name description and the 4 social links. this is how my php code looks like:

$query = new WP_Query( $args );
if ($query->have_posts()) :
    echo '<div class="ov-worker--wrapper"><div class="ov-worker--modal"><ul>';
    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 '<li class="ov-worker--view__all"><strong> Name: </strong>'.$name.'<br/><strong> Image: </strong>'.$image.'<br/><strong> Position: </strong>'.$position.'</li>';
    endwhile;
    echo '</ul></div></div>';
endif;
wp_reset_postdata();

MY PROBLEM: i am not able to select the $name, $description and the 4 social links directly in my js file. i have a not very clear idea of how to build the overlay on scss but i definetly got hooked on activating a Eventlistiner on the div to show the information i want.

Welcome to SO! You've written your question up well, but there are many many duplicates of it here, please try to search before posting a new question. — Don't Panic, Dec 14 '19 at 10:53

score 1 · Accepted Answer · answered Dec 14 '19 at 06:56

I have edited your code: a simple way is to set your desired values in hidden inputs then get them with js:

I have done that example for $name:

$query = new WP_Query( $args );
if ($query->have_posts()) :
echo '<div class="ov-worker--wrapper"><div class="ov-worker--modal"><ul>';
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 '<li class="ov-worker--view__all"><strong> Name: </strong>'.$name.'<br/><strong> Image: </strong>'.$image.'<br/><strong> Position: </strong>'.$position.'</li>';
endwhile;
echo '</ul></div></div>';
echo '<input type="hidden" id="nameInput" value="'.$name.'">';
echo '<input type="hidden" id="descInput" value="'.$description.'">';
endif;
wp_reset_postdata();

then in you js code you can access that value as example below:

 var name = document.getElementById('nameInput').value;

how can i take data from php to js

1 Answers1