Passing a PHP string as a parameter to a JavaScript onclick function

Solution 1: Avoid Inline Handlers (Recommended)

Using inline onclick handlers is considered bad practice because:

1.They cause messy quote escaping issues.

2.They create unnecessary scope problems.

3.They make your code harder to maintain.

Instead, pass values via data attributes or embed them in a <script> tag as JSON.

Example:

<?php
$button_data = [
    "example 1", 
    "example 2", 
    "example 3"
];
?>

<script type="application/json" id="button-data">
  <?= json_encode($button_data); ?>
</script>

<button>Example 1</button>
<button>Example 2</button>
<button>Example 3</button>

<script>
const buttonData = JSON.parse(
  document.querySelector('#button-data').textContent
);

const buttons = document.querySelectorAll('button');
buttons.forEach((button, i) => {
  button.addEventListener('click', () => {
    testFunction(buttonData[i]);
  });
});

function testFunction(data) {
  console.log(data);
}
</script>

Solution 2: Simple Inline Approach (Not Recommended)

If you want a quick solution and don’t mind inline JavaScript:

<?php
$example1 = "example 1";
$example2 = "example 2";
$example3 = "example 3";
$string = $example1 . ", " . $example2 . ", " . $example3;
?>

<script>
function testFunction(string) {
    console.log(string);
}
</script>

<button onclick='testFunction("")'>Test</button>