Connecting <input> with "this" or "event"

When our web app or website has inputs, sometimgs we want to pass the input value to some JavaScript functions to process. The intuitive way is to give an id to the input and then use document.getElementById("thatinputid").value to access to the value.

But, there are other ways that may help you write way simpler code, and even help you bind logics together..

Using "this"

The following input and result have this code:

<input oninput = "showinputvalue_1.innerHTML = this.value">
<div id = "showinputvalue_1"></div>

Where the div tag with the id "showinputvalue_2" has its innerHTML bounded with the input's value by using this.value

Using "event"

The following input and result have this code:

<input oninput = "showinputvalue_2.innerHTML = event.target.value">
<div id = "showinputvalue_2"></div>

Where the div tag with the id "showinputvalue_1" has its innerHTML bounded with the input's value by using event.target.value.

what are "event" and "this"

In the above examples, this means the input itself and the event means the input event.

• This is the input tag so you can use its value property.
• input event has the target with is its input tag so input.target euqals this.

<input oninput = "console.log(this == event.target)">

Useful Case

One use of this or event as arguments in functions is to bind logics. For example, building number pads that has innerHTML of somenumber which is used in some calculationg. Consider the following code:

<button onclick = "calculate(event)">1</button>
<button onclick = "calculate(event)">-1</button>
<result id = "showresult">1</result>
<script>
  var number = 1;
  function calculate(e){
  		showresult.innerHTML = number += Number(e.target.innerHTML);
  };
</script>

1

Here we grab the innerHTML of the buttons through event as the function argument. If you want to create more buttons the code is very easy to expand. Note you can even use object destructuring, where you put {target} as the function argument which may make the code even simpler.

<button onclick = "calculate_2(event)">1</button>
<button onclick = "calculate_2(event)">-1</button>
<button onclick = "calculate_2(event)">2</button>
<button onclick = "calculate_2(event)">-2</button>
<div id = "showresult_2">1</div>
<script>
  var number_2 = 1;
  function calculate_2({target}){
  		showresult_2.innerHTML = number_2 += Number(target.innerHTML);
  };
</script>

1

The following code would work the same way.

<button onclick = "calculate_3(this)">1</button>
<button onclick = "calculate_3(this)">-1</button>
<button onclick = "calculate_3(this)">2</button>
<button onclick = "calculate_3(this)">-2</button>
<result id = "showresult_3">1</result>
<script>
  var number_3 = 1;
  function calculate_3({innerHTML}){
  		showresult_3.innerHTML = number_3 += Number(innerHTML);
  };
</script>

Another Useful Case

Another useful case is that when we want to control a timer. One common logic is to set a variable of running to be true so that when you have a lot of buttons, you can enable or disable repectively to whether varialbe running is true or false.

0

This has the folloing code, that buttons are enabled or disabled is based on whether the timer is runing.

<button onclick = "starttimer_1()" data-whenrun = "disabled" >Start</button>
<button onclick = "stoptimer_1()" data-whenrun = "enabled" disabled>Stop</button>
<div id = "timer_1">0</div>
<script>
var intervale_1;
var isRuning_1 = false;
function starttimer_1(){
    isRuning_1 = true;
    intervale_1 = setInterval(function(){timer_1.innerHTML++},250);
    checkButtons();
};
  
function stoptimer_1(){
    isRuning_1 = false;
    clearInterval(intervale_1);
    checkButtons();
};
  
function checkButtons(){   
		document.querySelectorAll('[data-whenrun = "disabled"]').forEach(x=>{
    		x.disabled = isRuning_1 ? true : false;
  		 });
      	document.querySelectorAll('[data-whenrun = "enabled"]').forEach(x=>{
    		x.disabled = isRuning_1 ? false : true
  		 });      
 
  };
</script>

Or we can control the timer by one button

0

<button onclick="starttimer_2(this)">Start</button>
<div id="timer_2">0</div>
<script>
var interval_2;
const starttimer_2 = ee => {
   switch(ee.innerHTML) {
  	case 'Start':
    	ee.innerHTML = 'Stop';
        interval_2 = setInterval(()=>{timer_2.innerHTML++},250);
 	  	break;
    case 'Stop':
        ee.innerHTML = 'Start';
        clearInterval(interval_2);
	    break;
    default:
	};
 };
</script>