如何在 JavaScript 中的多个输入字段上使用 addEventListener 来调用它们的 keyup 事件？

Question

I have multiple input fields on which I want to apply onkeyup event on all of them with passing ID of textbox as a parameter. I want multiple keyup event because I want to handle some calculations on the basis of input ID. I tried but failed. Please suggest some solutions.

function GetDynamicTextBox(value) {
            return "<td>"
            +"<select class='js-example-placeholder-single js-states form-control loadcompany' id='lcompanyselect' onchange='getDriverAndTruck()';></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_co'></td>"
            +"<td><select class='js-example-placeholder-single js-states form-control' id='ldriverselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_driver'></td>"
            +"<td class=''><select class='js-example-placeholder-single js-states form-control' id='ltruckselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_truck'></td>"
            +"<td><input name='tripnumber' type='text' class='form-control' id='ltripnumber'/></td>"
            +"<td><select id='lsubtrip' name='subtrip' class='js-example-placeholder-single js-states form-control'>"
            +"<option disabled selected></option><option value='1'>1</option><option value='2'>2</option>"
            +"<option value='3'>3</option></select>"
            +"<td><input name='date' type='date' class='form-control' id='ldate'/></td>"
            +"<td><input name='pickupcity' type='text' class='form-control' id='lpickupcity'/></td>"
            +"<td><input name='pickupstate' type='text' class='form-control' id='lpickupstate'/></td>"
            +"<td><input name='deliverydate' type='date' class='form-control' id='ldeliverydate'/></td>"
            +"<td><input name='delivercity' type='text' class='form-control' id='ldelivercity'/></td>"
            +"<td><input name='deliverstate' type='text' class='form-control' id='ldeliverstate'/></td>"
            +"<td><input name='loadnumber' type='text' class='form-control' id='lloadnumber'/></td>"
            +"<td><input name='loadrate' type='text' class='form-control' id='lloadrate' onkeyup='countload();'/>"
            +"<span id='lerrormessage'></span></td>"
            +"<td><input name='dispatchfee' type='text' class='form-control' id='ldispatchfee' readonly/></td>"
            +'<td><input name="fuel" type="text" class="form-control count" id="lfuel" onkeyup=\"lcount('"+lfuel+"');\"/></td>'
            +"<td><input name='cardfee' type='text' class='form-control count' id='lcardfee' onkeyup='lcount('lcardfee');'/></td>"
            +"<td><input name='onloadrepair' type='text' class='form-control count' id='lonloadrepair' onkeyup='lcount('lonloadrepair');'/></td>"
            +"<td><input name='shoprepair' type='text' class='form-control count' id='lshoprepair' onkeyup='lcount('lshoprepair');'/></td>"
            +"<td><input name='trailerrent' type='text' class='form-control count' id='ltrailerrent' onkeyup='lcount('ltrailerrent');'/></td>"
            +"<td><input name='comcheck' type='text' class='form-control count' id='lcomcheck' onkeyup='lcount('lcomcheck');'/></td>"
            +"<td><input name='advance' type='text' class='form-control count' id='ladvance' onkeyup='lcount('ladvance');'/></td>"
            +"<td><input name='miscellenous' type='text' class='form-control count' id='lmiscellenous' onkeyup='lcount('lmiscellenous');'/></td>"
            +"<td><input name='misc1' type='text' class='form-control count' id='lmisc1' onkeyup='lcount('lmisc1');'/></td>"
            +"<td><input name='misc2' type='text' class='form-control count' id='lmisc2' onkeyup='lcount('lmisc2');'/></td>"
            +"<td><input name='misc3' type='text' class='form-control count' id='lmisc3' onkeyup='lcount('lmisc3');'/></td>"
            +"<td><input name='misc4' type='text' class='form-control count' id='lmisc4' onkeyup='lcount('lmisc4');'/></td>"
            +"<td><input name='total' type='text' class='form-control' id='ltotal' readonly/></td>"
            +"<td><input name='layover' type='text' class='form-control count' id='llayover' onkeyup='lcount('llayover');'/></td>"
            +"<td><input name='addtl1' type='text' class='form-control count' id='laddtl1' onkeyup='lcount('laddtl1')'/></td>"
            +"<td><input name='addtl2' type='text' class='form-control count' id='laddtl2' onkeyup='lcount('laddtl2');'/></td>"
            +"<td><input name='addtl3' type='text' class='form-control count' id='laddtl3' onkeyup='lcount('laddtl3');'/></td>"
            +"<td><input name='subtotal' type='text' class='form-control' id='lsubtotal' readonly/></td>"
            +"<td><input name='paymentmode' type='text' class='form-control' id='lpaymentmode'/></td>"
            +"<td><input name='pay' type='text' class='form-control' id='lpay' onkeyup='countleftpay();'/></td>"
            +"<td><input name='notes' type='text' class='form-control' id='lnotes'/></td>"
            +"<td><input name='grandtotal' type='text' class='form-control' id='lgrandtotal' readonly/></td>"
            +"<td><button type='button' class='btn btn-outline-info text-info' onclick='savetriplist();'>Submit</button>" 
        }

Answer 1

From the above comments...

1/2... most probably the OP is in need of just as single event listener which will (has to) be assigned/attached to the very element node where the return value of GetDynamicTextBox gets/was rendered into. Thus it was nice to have provided with the example code the meta/outer html structure as well.

2/2... The to be used technique is referred to as Event delegation ... David Walsh:: How JavaScript Event Delegation Works ... javascript.info:: Event Delegation ... jQuery:: Understanding Event Delegation

 function createTextBoxMarkup(/* value */) { return ` <td> <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/> </td> <td> <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/> </td> <td> <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/> </td>`; } function handleTextBoxKeyup(evt) { const elmInput = evt.target; const { type, name, id, value } = elmInput; console.log({ elmInput, type, name, id, value }); } function init() { const elmTBody = document.querySelector('tbody'); const elmTr = document.createElement('tr'); elmTr.innerHTML = createTextBoxMarkup(); elmTBody.appendChild(elmTr); // register 'keyup' event type. elmTBody.addEventListener('keyup', handleTextBoxKeyup); } init();

 body { margin: 0; }.as-console-wrapper { min-height: 83%; }

 <table> <tbody> </tbody> </table>

Edit according to further questions of the OP

Can I use something like

function GetDynamicTextBox(value) { return '<td><input type="text" id="lfuel" onkeyup="count('lfuel');"/></td><td><input type="text" id="lcardfee" onkeyup="count('lcardfee');" /></td>' }

and then define that count like:

 function count(id) { if (id == 'lfuel') { var a = document.getElementById('lfuel').value; } if (id == 'lcardfee') { var b = document.getElementById('lcardfee').value;} }

– Rakhi

Above solution did not worked for me. – Rakhi

The implementation of handleTextBoxKeyup is just example code which demonstrates how information can be extracted from the event object. Of cause the OP can implement the handler according to her/his needs eg invoking a count function from within the handler whenever the event.target is an input element of type "text" .

 function createTextBoxMarkup(/* value */) { return ` <td> <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/> </td> <td> <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/> </td> <td> <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/> </td>`; } function isTextTypeInputElement(elmNode) { return ( (elmNode?.tagName.toLowerCase() === 'input') && (elmNode?.type === 'text') ); } function count(elmTextInput) { const { name, id, value } = elmTextInput; console.log({ elmTextInput, name, id, value }); } function handleTextBoxKeyup(evt) { const elmNode = evt.target; if (isTextTypeInputElement(elmNode)) { count(elmNode); } } function init() { const elmTBody = document.querySelector('tbody'); const elmTr = document.createElement('tr'); elmTr.innerHTML = createTextBoxMarkup(); elmTBody.appendChild(elmTr); // register 'keyup' event type. elmTBody.addEventListener('keyup', handleTextBoxKeyup); } init();

 body { margin: 0; }.as-console-wrapper { min-height: 83%; }

 <table> <tbody> </tbody> </table>