Could I write these event listeners in a more efficient way?-CodePudding

Hi I have created 9 event listeners that are very similar and I would like to write them in a more efficient manner if possible. each button opens up the same hidden form and populates the dropdown menu with a different value.

const ordermulch = document.getElementById('Mulch');
ordermulch.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 1;
});
const orderptopsoil = document.getElementById('prem-topsoil');
orderptopsoil.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 2;
});
const orderstopsoil = document.getElementById('screened-topsoil');
orderstopsoil.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 3;
});
const ordercgravel = document.getElementById('crushed-gravel');
ordercgravel.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 4;
});
const orderpgravel = document.getElementById('pea-gravel');
orderpgravel.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 5;
});
const orderrrock = document.getElementById('river-rock');
orderrrock.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 6;
});
const orderhpbed = document.getElementById('bedding');
orderhpbed.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 7;
});
const ordersand = document.getElementById('sand');
ordersand.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 8;
});
const ordergseed = document.getElementById('grass-seed');
ordergseed.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 9;
});

CodePudding user response：

This is simple, use loops!

Collect all your IDs in an array:

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // and so on...

Loop through this array:

ids.forEach((value, i) => {
    // todo
});

For each iteration you have to get the element first:

const element = document.getElementById(value);

And now you can add the EventListener to this element:

element.addEventListener('click', () => {
    document.getElementById('order-form').style.display = 'block';
    document.getElementById('input_9_11').selectedIndex = i 1;
});

All together:

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // and so on...
ids.forEach((value, i) => {
    const element = document.getElementById(value);
    element.addEventListener('click', () => {
        document.getElementById('order-form').style.display = 'block';
        document.getElementById('input_9_11').selectedIndex = i 1;
    });
});

Small side note: It's great that you're looking for optimizations and don't want to use redudant code. That's the only way to get better!

CodePudding user response：

<select> boxes come pre-built with this functionality without you having to manually set the selectedindex each time an item is selected. Instead of attaching the event to the click event of the individual selection items (stuff in the list), you can bind it to the <select> element's "change" listener and pull the selectedindex with much less code.

Example: assuming your html looks something like this...

<form id="order-form">
  <select id="select">
    <option id="mulch">Mulch</option>
    <option id="prem-topsoil">Premium Topsoil</option>
    <option id="screened-topsoil">Screened Topsoil</option>
    <option id="crushed-gravel">Crushed Gravel</option>
    <option id="pea-gravel">Pea Gravel</option>
    <option id="river-rock">River Rock</option>
    <option id="bedding">Bedding</option>
    <option id="sand">Sand</option>
    <option id="grass-seed">Grass Seed</option>
  </select>
  <input type="text" id="input_9_11">
</form>

I also added an example of how you could get to the "id" or any other attribute attached to the selected option when the function fires.

var products = document.getElementById('select');
products.addEventListener('change', function(e) {
  var index = products.selectedIndex;
  console.log( index ); 
  console.log( e.target.options[index].getAttribute('id') );
  document.getElementById('input_9_11').value = index   " - "   e.target.options[index].getAttribute('id');
})

https://jsfiddle.net/0b8vz9fq/

CodePudding user response：

Make an array of all your IDs and then iterate it to add the event listeners:

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // ...rest of IDs

ids.forEach((id, index) => {
    const elem = document.getElementById(id);

    elem.addEventListener('click', () => {
        document.getElementById('order-form').style.display = "block";
        document.getElementById("input_9_11").selectedIndex = index   1;
    });
})

You should also store order-form and input_9_11 in a variable instead of finding them on every iteration.