How to pass php array string to javascript function as a parameter?

Question

I am iterating through a php array to display a list of photo filters. I need to be able to pass the selected filter name to my javascript function to load it, for now I am only able to get the $i id but the full filter name would be so much more easier.

How can pass $filters[$i] to getFilterName()?

<?php
    for ($i = 0; $filters[$i]; $i++)
    {
        if (strpos($filters[$i], '.png'))
        {
            ?>
            <!-- get php variable for javascript : -->
            <div id="filter-target" style="display: none;">
                <?php
                    echo htmlspecialchars($i);
                ?>
            </div>
            <!-- ... -->

            <?php
            echo '<div tabindex="-1" class="filter_box" onclick="getFilterName('.$i.')">';
                echo '<img class="filter" src="pictures/filters/'.$filters[$i].'"/>';
            echo '</div>';
        }
    }
?>

Thank you!

Answer 1

Because the filename is a string, you need to escape it in ' ' like so:

<?php
    for ($i = 0; $filters[$i]; $i++)
    {
        if (strpos($filters[$i], '.png'))
        {
            ?>
            <!-- get php variable for javascript : -->
            <div id="filter-target" style="display: none;">
                <?php
                    echo htmlspecialchars($i);
                ?>
            </div>
            <!-- ... -->

            <?php
            echo '<div tabindex="-1" class="filter_box" onclick="getFilterName(\''.$filters[$i].'\')">';
                echo '<img class="filter" src="pictures/filters/'.$filters[$i].'"/>';
            echo '</div>';
        }
    }
?>

Otherwise it would treat the string as a variable name in JavaScript and wouldnt fint it because it doesnt exist.