HTML onClick Function to change the JavaScript source

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")

MyStream · Accepted Answer · 2018-04-26 23:34:40Z

3

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>

edited Apr 26, 2018 at 23:34

MyStream

2,5511 gold badge16 silver badges34 bronze badges

answered Apr 26, 2018 at 23:31

h1b9b

1,0705 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MyStream · Accepted Answer · 2018-04-26 23:29:03Z

<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?

Mohammad Ajmal Amirzad · Accepted Answer · 2018-04-26 23:38:08Z

0

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) { });
    });
});

answered Apr 26, 2018 at 23:38

Mohammad Ajmal Amirzad

6294 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML onClick Function to change the JavaScript source

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related