html virtual keys scan with javascript

Question

I'm trying to create a simple web-based drink order app for just practicing. as you can see, I have to get and scan all drink keys value to find out which drink user selected.

But the problem is in for loop when I want to read every three keys at once with document.getElementById and save it into a variable(array). this doesn't work because the browser can not recognize the "bi" as I found in browser debug console. I set the "i" beside "b" because I want to check every single key in every cycle of the for loop.

What solution can you offer for this issue or what would you do if you want do such a project like this?

 function drinkOrder() { var drinkType, i = 1; for (i = 1; i < 4; i++) { //this is for drinks key scan to find out which drink user select. drinkType = document.getElementById('pi').innerText; drinkType = parseInt(drinkType); } if (drinkType == 1) { alert('you choosed coffee!'); } if (drinkType == 2) { alert('you choosed tea!'); } if (drinkType == 3) { alert('you choosed hot water!'); } }

 div { background-color: orange; width: 500px; height: 250px; margin-left: 30%; margin-top: 15%; } button { width: 100px; height: 50px; margin-top: 20%; margin-left: 10%; color: black; background-color: white; padding-top: 10px; } p { color: white; margin-top: 0px; }

 <div id="coffeMachine"> <button id="b1" onclick="drinkOrder()" value="1"> coffee <p id="p1"> 1 </P> </button> <button id="b2" onclick="drinkOrder()"> tea <p id="p2"> 2 </p> </button> <button id="b3" onclick="drinkOrder()"> hot water <p id="p3"> 3 </P> </button> </div>

here is an screen shot of browser error:

Answer 1

Try:

 function drinkOrder() { var drinkType, i = 1; for (i = 1; i < 4; i++) { //this is for drinks key scan to find out which drink user select. drinkType = document.getElementById('p' + i).innerText; drinkType = parseInt(drinkType); } if (drinkType == 1) { alert('you choosed coffee!'); } if (drinkType == 2) { alert('you choosed tea!'); } if (drinkType == 3) { alert('you choosed hot water!'); } }

 div { background-color: orange; width: 500px; height: 250px; margin-left: 30%; margin-top: 15%; } button { width: 100px; height: 50px; margin-top: 20%; margin-left: 10%; color: black; background-color: white; padding-top: 10px; } p { color: white; margin-top: 0px; }

 <div id="coffeMachine"> <button id="b1" onclick="drinkOrder()" value="1"> coffee <p id="p1"> 1 </P> </button> <button id="b2" onclick="drinkOrder()"> tea <p id="p2"> 2 </p> </button> <button id="b3" onclick="drinkOrder()"> hot water <p id="p3"> 3 </P> </button> </div>

Answer 2

You can give the function a number as a parameter and this would work like this:

 function drinkOrder(drinkType) { if (drinkType == "1") { alert('you choosed coffee!'); } if (drinkType == "2") { alert('you choosed tea!'); } if (drinkType == "3") { alert('you choosed hot water!'); } }

 <div id="coffeMachine"> <button id="b1" onclick="drinkOrder('1')" value="1"> coffee <p id="p1"> 1 </P> </button> <button id="b2" onclick="drinkOrder('2')"> tea <p id="p2"> 2 </p> </button> <button id="b3" onclick="drinkOrder('3')"> hot water <p id="p3"> 3 </P> </button> </div>

Answer 3

you should concat like that

drinkType = document.getElementById('p'+i).innerText;

Or you can use class on all buttons and make a loop

for example

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>

script

btn = document.querySelectorAll('.btn');
btn.forEach((item) => {
  item.addEventListener('click', function() => {
    value = item.innerText
  }
}