Applying JS function and event listener to multiple html elements

Question

I am creating a form which I simplified below to get straight to the point, the JS code is to control the placeholder; hiding on focus and reappear on blur, obviously this now works for the input with id('Name') only. How do I apply these functions to all inputs elements DRY without repeating the code for each input.

var x = document.getElementById("Name");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
    document.getElementById('Name').placeholder= '';  
}

function myBlurFunction() {
    document.getElementById('Name').placeholder= 'Name';  
}

<div id='card'>
    <input id='Name' type='text' placeholder='Name'/>
    <input id='Age' type='text' placeholder='Age'/>
    <input id='Sex' type='text' placeholder='Sex'/>
    <input id='Occupation' type='text' placeholder='Occupation'/>
</div>

It does hide the placeholder when I start typing not onfocus or onclick. — A. Ahmed, Sep 14 '17 at 12:19

php_nub_qq · Accepted Answer · 2017-09-14T12:36:57.080

Array.from(document.getElementsByTagName("input")).forEach(input => {

  input.addEventListener("focusin", focus);
  input.addEventListener("focusout", blur.bind(input, input.placeholder));

});


function focus() {
  this.placeholder = '';
}

function blur(placeholder) {
  this.placeholder = placeholder;
}

<div id='card'>
  <input id='Name' type='text' placeholder='Name' />
  <input id='Age' type='text' placeholder='Age' />
  <input id='Sex' type='text' placeholder='Sex' />
  <input id='Occupation' type='text' placeholder='Occupation' />
</div>

Using the this keyword you can access the object which the event was triggered on.

Also you need to preserve the placeholder somehow, in the example above I used bound function but you can chose your own way.

You can also find an example how to specify names manually in revision 2 of this answer.

Thank you. I used your original answer and preserved the placeholder by using `obj.getAttribute('id')`. — A. Ahmed, Sep 14 '17 at 12:41

score 1 · Answer 2 · answered Sep 14 '17 at 12:35

try to do ike this

    <!DOCTYPE html>
    <html>
    <body>
    
    <div id='card'>
    <input id='Name' type='text' placeholder='Name' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Name')" />
    <input id='Age' type='text' placeholder='Age' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Age')" />
    <input id='Sex' type='text' placeholder='Sex' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Sex')" />
    <input id='Occupation' type='text' placeholder='Occupation' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Occupation')" />
    </div>
    
    <script>
    function myFocusFunction(event) {
    
        var element = event.target.getAttribute('id');
        document.getElementById(element).placeholder= '';  
    }
    
    function myBlurFunction(event,placeHolder) {        
        var element = event.target.getAttribute('id');           
        document.getElementById(element ).placeholder= placeHolder ;  
    }
    
    </script>
    
    </body>
    </html>

on blur event we need to pass placeholder string because on focus we set placeholder as " " so, on blur event we can not get placeholder by getAttribute method because it always give null.

score 0 · Answer 3 · answered Sep 14 '17 at 12:19

You could give the elements a class, and iterate

document.querySelectorAll('.placeholder').forEach(function(el) {
  el.addEventListener("focusin", myFocusFunction);
  el.addEventListener("focusout", myBlurFunction);
});

function myFocusFunction() {
  document.getElementById('Name').placeholder = '';
}

function myBlurFunction() {
  document.getElementById('Name').placeholder = 'Name';
}

<div id='card'>
  <input id='Name' class="placeholder" type='text' placeholder='Name' />
  <input id='Age'  class="placeholder" type='text' placeholder='Age' />
  <input id='Sex'  class="placeholder" type='text' placeholder='Sex' />
  <input id='Occupation' type='text' placeholder='Occupation' />
</div>

JiangangXiong · Answer 4 · 2017-09-14T12:26:05.250

You can set a common class for the inputs that need this function，for example， ‘add-tip’， and then：

var x = document.querySelectorAll(".add-tip");
for (var i=0;i< x.length;i++) {
    x[i].addEventListener("focusin", myFocusFunction);
    x[i].addEventListener("focusout", myBlurFunction);
}
function myFocusFunction(e) {
    e.target.setAttribute('placeholder','');  
}

function myBlurFunction(e) {
    e.target.setAttribute('placeholder','Name');  
}

Applying JS function and event listener to multiple html elements

4 Answers4

Linked