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 = "&#9989;";
 // Alert waiter
  } else {
    document.getElementById("food1").innerHTML = "Order";
 // Cancel Request
  }
}

function orderFood2(helpVal) { 
  if (document.getElementById("food2").innerHTML === "Order") {
    document.getElementById("food2").innerHTML = "&#9989;";
 // Alert waiter
  } else {
    document.getElementById("food2").innerHTML = "Order";
 // Cancel Request
  }
}

function orderFood3(helpVal) { 
  if (document.getElementById("food3").innerHTML === "Order") {
    document.getElementById("food3").innerHTML = "&#9989;";
 // 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>

score 0 · Answer 1 · answered Mar 08 '20 at 06:49

0

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>

answered Mar 08 '20 at 06:49

CertainPerformance

356,069
52
309
320

This may work, but I have a lot more buttons which are used for different purposes (e.g Drink Orders, Drink Refills, Play games, etc) I'll give it a try. It may only require additional handling functions, correct? – Ayman Alqaq Mar 08 '20 at 07:26
It depends on what exactly goes on when those other buttons are clicked, but you can probably put all the logic into a single function which checks which type of button was clicked and carries out the appropriate logic for that button. – CertainPerformance Mar 08 '20 at 07:36
If you wanted to see the entire context, the full repository is located at: https://github.com/FabledKnight/hello-world/tree/master/web/index.html The entire project is still in the beginning phase, so a lot of changes still need to be made. – Ayman Alqaq Mar 08 '20 at 09:02

score -1 · Accepted Answer · answered Mar 08 '20 at 06:51

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 = "&#9989;";
    // Alert waiter
  } else {
    document.getElementById(foodId).innerHTML = "Order";
    // Cancel Request
  }
}

How to create dynamic functionality using Javascript and HTML?

2 Answers2