HTML onClick函数更改JavaScript源

Question

I have below button list

<button class="button button2">Hospital</button>
<button class="button button2">Medical</button>
<button class="button button2">Pharmacy</button>

what is the best on click function to replace my Javascript url (dbexport2.php) on below script

  // Change this depending on the name of your PHP or XML file
  downloadUrl('dbexport2.php', function(data) {
    var xml = data.responseXML;

I would like to change the php file based on the button click, example for hospital it would like to be "downloadUrl('hospital.php')" for medical it would like to be "downloadUrl('medical.php")

Answer 1

You can do it using the value attribute

 function handleResponse(data) { var xml = data.responseXML; // .. etc } var buttons = document.getElementsByClassName('button'); for(var i = 0, j = buttons.length; i < j; i++) { var btn = buttons[i]; btn.addEventListener('click', function() { downloadUrl(this.value, handleResponse); }); } 

 <button class="button" value="hospital.php">Hospital</button> <button class="button" value="medical.php">Medical</button> <button class="button" value="pharmacy.php">Pharmacy</button> 

Answer 2

<button class="button button2" data-url="hospital.php">Hospital</button>
<button class="button button2" data-url="medical.php">Medical</button>

<script>
var downloadButtons = document.querySelector('.button[data-url]'),
    numButtons      = downloadButtons.length;
if(numButtons){
    while(numButtons--) {
        if(downloadButtons[numButtons]) {
            downloadButtons[numButtons].onClick = function(){
                var url = this.getAttribute('data-url');
                downloadUrl(url, function(data) { ... }
            }
        }
    }
}
</script> 

Something akin to this approach, depending on what JavaScript library (or lack thereof) you have available. Add an attribute that you can reference in javascript when the click event is called, and then pass it into your function when the event is fired?

Answer 3

Insert your URLs in data-url.

<button class="button button2" data-url="Hospital.php">Hospital</button>
<button class="button button2" data-url="Medical.php">Medical</button>
<button class="button button2" data-url="Pharmacy.php">Pharmacy</button>

and then go with a simple looping.

document.querySelectorAll('button[data-url]').forEach(item => {
    item.addEventListener('click', e => {

        let url = item.getAttribute('data-url');

        //Your code
        downloadUrl(url, function(data) { });
    });
});