js function doesn't work on more then one input-CodePudding

i have the following code: https://jsfiddle.net/cg3Lhstz/

with 3 input field: https://jsfiddle.net/vyaw6jop/

It works only on one input field. What happens if i add another input field?

For example:

   <table>
  <tbody>
    <tr>
        <td>
            <input type='text' onkeyup="checkValid(this);" id='item1'  maxlength="11">
            <input type='text' onkeyup="checkValid(this);" id='item2'  maxlength="11">
            <input type='text' onkeyup="checkValid(this);" id='item3'  maxlength="11">
        </td>
      </tr>      
  </tbody>
</table>

CodePudding user response：

The basic issue is that you are not setting the styles based on the context of the specific element, you have hard-coded it all to:

document.getElementById("cont")

Everywhere you've done this, you should be using the target of the event, which you pass in your onkeyup handler.

function checkValid(txt) // <-- the txt element is where you need to set the styles

Just for demo's sake - this will change the background to aqua on the correct element each time validation starts:

function checkValid(txt) {
   hxt.style.backgroundColor = 'Aqua';
}

CodePudding user response：

  <input type="text" id="search_member" onkeyup="eventHandler(this);">

//Here is what you need to do in a test event handler.

    function eventHandler(arg){
      //use variable arg as element that has been clicked here...
    }