How to create dynamic functionality using Javascript and HTML?

Question

I'm creating a page which has multiple order buttons (One for each menu item). When an order is placed I want to call a Javascript function to change only the order button pressed rather than every button with the ID. There has to be better implementation for these function calls... Anyone?

 function orderFood1(helpVal) { if (document.getElementById("food1").innerHTML === "Order") { document.getElementById("food1").innerHTML = "✅"; // Alert waiter } else { document.getElementById("food1").innerHTML = "Order"; // Cancel Request } } function orderFood2(helpVal) { if (document.getElementById("food2").innerHTML === "Order") { document.getElementById("food2").innerHTML = "✅"; // Alert waiter } else { document.getElementById("food2").innerHTML = "Order"; // Cancel Request } } function orderFood3(helpVal) { if (document.getElementById("food3").innerHTML === "Order") { document.getElementById("food3").innerHTML = "✅"; // Alert waiter } else { document.getElementById("food3").innerHTML = "Order"; // Cancel Request } }

 <button type="button" id="food1" onclick="orderFood1()" class="btn btn-primary">Order</button> <button type="button" id="food2" onclick="orderFood2()" class="btn btn-primary">Order</button> <button type="button" id="food3" onclick="orderFood3()" class="btn btn-primary">Order</button>

Answer 1

They all look to do nearly the same thing, so you can use only a single function. To identify which button was clicked, you can examine the clicked button from the listener - the target of the event. Also, best to avoid inline handlers - attach the listeners properly using Javascript instead.

Since you're only inserting text, it'd be more appropriate to retrieve and assign to the textContent of the element, rather than its innerHTML .

 const handleOrder = ({ target }) => { if (target.textContent === 'Order') { target.textContent = '✅'; console.log('Alerting waiter'); } else { target.textContent = "Order"; console.log('Canceling request'); } }; for (const button of document.querySelectorAll('button')) { button.addEventListener('click', handleOrder); }

 <button type="button" class="btn btn-primary">Order</button> <button type="button" class="btn btn-primary">Order</button> <button type="button" class="btn btn-primary">Order</button>

Answer 2

I think you can create the following html code:

<button type="button" id="food1" onclick="orderFood('food1')" class="btn btn-primary">Order</button>

<button type="button" id="food2" onclick="orderFood('food2')" class="btn btn-primary">Order</button>

Which means that you use only single orderFood function, that gets the ID of the button element as a parameter.

And then your JS code could be something like this:

function orderFood(foodId) { 
  if (document.getElementById(foodId).innerHTML === "Order") {
    document.getElementById(foodId).innerHTML = "✅";
    // Alert waiter
  } else {
    document.getElementById(foodId).innerHTML = "Order";
    // Cancel Request
  }
}