我可以以更有效的方式编写这些事件侦听器吗？

Question

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

Answer 1

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

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

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

https://jsfiddle.net/0b8vz9fq/

Answer 2

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.

Answer 3

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!