JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div>Пример с radio</div>
	<input name="dzen" type="radio" id="input_0">
	<input name="dzen" type="radio" id="input_1">
	<input name="dzen" type="radio" checked id="input_2">
<br><br>

<div>Пример с input</div>
	<input type="text" id="type=[text]_0">
	<input type="text" id="type=[text]_1">
	<input type="text" id="type=[text]_2">
<br><br>

<div>Пример с option 1</div>
	<select>
		<option>Селект-0 Оптион_0</option>
		<option>Селект-0 Оптион_1</option>
		<option selected="">Селект-0 Оптион_2</option>
	</select>
	<select>
		<option>Селект-1 Оптион_0</option>
		<option>Селект-1 Оптион_1</option>
		<option selected="">Селект-1 Оптион_2</option>
	</select>
<br><br>

JavaScript

/* пример с radio */
	var radio = document.querySelectorAll('input[type=radio]');
	for(i=0; i<radio.length; i++){
	    radio[i].addEventListener('change',function(e){			// вместо 'change' можно использовать 'click'
			console.log( e.target.id );
		},false);
	}
/* пример с radio */


/* пример с input */
	var text = document.querySelectorAll('input[type=text]');
	for(i=0; i<text.length; i++){
	    text[i].addEventListener('input',function(e){			// здесь попробуйте изменить 'input' на 'change', 'focusin', 'focusout' и посмотреть на результат в консоли браузера. При 'input' событие будет срабатывать каждый раз по нажатию клавиш на клавиатуре.
			console.log( this.value );
		},false);
	}
/* пример с input */

/* пример с select */
	var select = document.querySelectorAll('select');
	for(i=0; i<select.length; i++){
		select[i].addEventListener('change',function(){
			console.log( this.value );
		},false);
	}
/* пример с select */