如何为按钮添加点击事件动态替换JavaScript中的PHP文件路径？

Great question! Let's walk through the cleanest, most maintainable approach to solve this problem—one that keeps your HTML and JavaScript decoupled, scales easily, and follows modern web best practices.

Step 1: Update Your HTML with Semantic Data Attributes #

First, modify your buttons to store their corresponding PHP file paths using HTML5 data-* attributes. This keeps the URL logic tied directly to each button without cluttering your JavaScript:

<!-- Add a container for better event delegation efficiency (optional but recommended) -->
<div class="button-group">
  <button class="button button2" data-php-url="dbexport_hospital.php">Hospital</button>
  <button class="button button2" data-php-url="dbexport_medical.php">Medical</button>
  <button class="button button2" data-php-url="dbexport_pharmacy.php">Pharmacy</button>
</div>

I've renamed the PHP files to be more descriptive (adjust them to match your actual file names) and wrapped the buttons in a container for more efficient event handling.

Step 2: Use Event Delegation for Clean, Scalable JavaScript #

Instead of adding individual onclick handlers to each button (which gets messy fast), we'll use event delegation—binding a single event listener to a parent element. This works because click events bubble up the DOM, so we can catch them at the container level and check which button was clicked.

First, wrap your existing downloadUrl logic in a reusable function:

// Reusable function to fetch data from a given PHP URL
function loadDataFromPhp(phpFilePath) {
  downloadUrl(phpFilePath, function(data) {
    var xml = data.responseXML;
    // Add your existing XML processing logic here
    console.log('Loaded XML from:', phpFilePath);
  });
}

Then add the event listener to the button container:

// Get the button container (use document if you don't have a container)
const buttonGroup = document.querySelector('.button-group');

buttonGroup.addEventListener('click', function(e) {
  // Check if the clicked element is one of our target buttons
  if (e.target.matches('.button.button2')) {
    // Extract the PHP URL from the data attribute
    const targetPhpUrl = e.target.dataset.phpUrl;
    // Call our reusable function with the dynamic URL
    loadDataFromPhp(targetPhpUrl);
  }
});

Why This Is the Optimal Approach #

• Maintainability: If you need to add new buttons later, you just add the HTML with the correct data-php-url—no changes to your JavaScript required.
• Performance: Event delegation uses a single event listener instead of one per button, which is more efficient (especially if you have many buttons).
• Separation of Concerns: Your HTML handles the button labels and associated URLs, while your JavaScript handles the logic—no inline onclick clutter mixing structure and behavior.

Alternative: Inline onClick (Not Recommended) #

If you absolutely need a quick inline solution (though it's less scalable), you could do this:

<button class="button button2" onclick="loadDataFromPhp('dbexport_hospital.php')">Hospital</button>
<button class="button button2" onclick="loadDataFromPhp('dbexport_medical.php')">Medical</button>
<button class="button button2" onclick="loadDataFromPhp('dbexport_pharmacy.php')">Pharmacy</button>

But this couples your HTML and JavaScript tightly, making it harder to maintain as your project grows.

内容的提问来源于stack exchange，提问作者bayu