在值上插入值时如何切换输入元素的类

Question

I am having a javascript handler on an input html element. The input html elements may be many.. The point is whenever I insert a value on the input html element I would like to add a class on that element in order to change the background-color of the input that has a value. Right now I am doing: **$('this.seat_box').toggleClass('selected');******** but this will affect all the elements that has the class. Is there a way to pass an argument on the handler function in the input element refering somehow to this? I have tried to pass the arguments or argument like: onchange="bc.seatBoxHandleEvent('input', this) and none of these worked...

Any help appreciated.!

The Html code:

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">
  <input id="posA100" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
  <input id="posA101" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
</div>

I have the following code for javascript validation:

bc.seatBoxHandleEvent = function () {
  bc.checkInput();
  var seatNumberFirstFloor = $('#dynamic-bus-builder-1');
  if (seatNumberFirstFloor && seatNumberFirstFloor.valueOf()) {
    var leftStreaming = (event.target.id);
    var rightStreaming = 'posB1' + leftStreaming.substring(5, 7);
    document.getElementById(rightStreaming).innerHTML = event.target.value;
  }
}

bc.checkInput = function () {
  var targetValue = event.target.value;
  var id = event.target.id;
  var classOfInput = event.target.classList;
  if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) {
    console.log('valid number');
    console.log(classOfInput);
    **$('this.seat_box').toggleClass('selected');********
  }
  else {
    console.log('invalid character');
  }
}

Answer 1

Pass the element to the function from HTML.

 bc = []; bc.seatBoxHandleEvent = function (el) { bc.checkInput(el); var seatNumberFirstFloor = $('#dynamic-bus-builder-1'); if (seatNumberFirstFloor && seatNumberFirstFloor.valueOf()) { var leftStreaming = (event.target.id); var rightStreaming = 'posB1' + leftStreaming.substring(5, 7); } } bc.checkInput = function (el) { var targetValue = event.target.value; var id = event.target.id; var classOfInput = event.target.classList; if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) { console.log('valid number'); console.log(classOfInput); $(el).toggleClass('selected'); } else { console.log('invalid character'); } } 

 div.class1 { border: 1px solid #000; padding: 10px; background-color: #FFCC00; } .selected { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1"> <input id="posA100" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent(this)"> <input id="posA101" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent(this)"> </div> 

Answer 2

I did just rewrote bc to an object instead, the syntax is apart from that the same. But this one works. Remember that the onchange event is only trigger on blur. So if you want the event to trigger when entering a value then use onkeypress event instead.

JS

var BC = function () {
  this.seatBoxHandleEvent = function () {

    var checkInput = function () {

      var targetValue = event.target.value;
      var id = '#' + event.target.id;

      if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) {
        console.log('valid number');
        console.log(event.target.classList); // [seat-box] set on the event.target
        $(id).toggleClass('selected');
        console.log(event.target.classList); // [seat-box, selected] set on the event.target
      }
      else {
        console.log('invalid character');
      }
    };

    checkInput();
  };
};

this.bc = new BC();

HTML

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">
  <input id="posA100" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
  <input id="posA101" type="text" class="seat_box" onchange="bc.seatBoxHandleEvent()">
</div>