Is it somehow possible to set up oninput event delegation to change the text of the changeText div?
<div id="manyInputs">
<div>
<input type="text">
<div class="changeText">
</div>
</div>
<div>
<input type="text">
<div class="changeText">
</div>
</div>
<div>
<input type="text">
<div class="changeText">
</div>
</div>
</div>
A vanilla JS solution that would work is to bind the "change" event to your "manyInputs" div and grab the target element from the event handler and look for it's next sibling. If you don't know the structure of your code then you could also add an data-id to the input then use that id to find your text div to add the value to.
HTML
<div id="manyInputs">
<div>
<input type="text">
<span class="changeText"></span>
</div>
<div>
<input type="text">
<span class="changeText" ></span>
</div>
<div>
<input type="text">
<span class="changeText"></span>
</div>
</div>
Javascript
var inputs = document.getElementById('manyInputs');
inputs.addEventListener('change', function(e){
var value = e.target.value;
e.target.nextElementSibling.innerHTML = value;
});
JS Fiddle: https://jsfiddle.net/s7wtevbu/
JS Fiddle with data-id solution: https://jsfiddle.net/kas1h6xe/
The easiest way to do this is by using jquery's .keyup() function. Which allows you to bind an event handler to the "keyup" JavaScript event, or trigger that event on an element..
Html:
<div id="manyInputs">
<div>
<input id="input1" type="text" data-div-id="divForInput1">
<div id="divForInput1" class="changeText"></div>
</div>
<div>
<input id="input2" type="text" data-div-id="divForInput2">
<div id="divForInput2" class="changeText"></div>
</div>
<div>
<input id="input3" type="text" data-div-id="divForInput3">
<div id="divForInput3" class="changeText"></div>
</div>
</div>
Javascript:
<script>
$(document).ready(function() {
$('input[type="text"]').keyup(function() {
$('#' + $(this).attr('data-div-id')).text($(this).val());
});
});
</script>
You can try this example I made in jsfiddle (Make sure you hit the "Run" button at the top):
