One javascript function works outside a loop-file, other doesn't

Question

BBpress uses loop-single-reply.php and content-single-topic.php to display a page inside a topic. I've edited both files for some extra functionality.

Everything works as it should but I can't stop wondering why I have to place one javascript function inside the loop-single-reply.php file to work while I can place the other in content_single_topic.php

This is the code I'm working with, loop-single-reply.php:

<button class="button-best-like" onClick="return shareMeta('<?php echo $correct_link; ?>', '<?php echo $fb_excerpt; ?>', 'fb-image-<?php echo $reply_id; ?>'); ga('send','event','Facebook','share','like', 0)">
<i class="fa fa-facebook-official" aria-hidden="true" title="Share on Facebook"></i>
</button>

<script>
function shareMeta(link, description, replyId) {
    var title           = '<?php echo $fb_title; ?>';
    var replyImages     = document.getElementById(replyId).getElementsByTagName('img');
    var defaultImage    = '/uploads/2017/12/Hero-image.jpg';
    var result;
    if (replyImages.length > 0) {
        for(var i=0, l=replyImages.length; i<l; i++) {
            if(replyImages[i].height >= 200 && replyImages[i].width >= 200) {
                result = i;
                break;
            }
        }
        if (result == null) {
            var image = defaultImage;
        } else {
            var image = replyImages[result].src;
        }
    } else {
        var image = defaultImage;
    }
    shareOverrideOGMeta(link, title, description, image);
}
</script>

And the content-single-topic.php code

<script>
function shareOverrideOGMeta(overrideLink, overrideTitle, overrideDescription, overrideImage) {
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
            object: {
                'og:url': overrideLink,
                'og:title': overrideTitle,
                'og:description': overrideDescription,
                'og:image': overrideImage
            }
        })
    });
}
</script>

When I try to place the shareMeta function inside content-single-topic.php everything stops working. So I have to place it inside loop-single-reply.php to work. But in this case the function is printed 15 times, which seems a bit unnecessary.

How come? Is there a better way? Keep in mind this is my first attempt at javascript so there is probably a better way.

One javascript function works outside a loop-file, other doesn't

0 Answers0