empty the value of the input field

Question

I am trying to replace the value of the input with nothing when someone clicks on it,

I tried the below, but i keep getting this error in the console, can you help me out

elem.addEventListener is not a function

HTML

<input type='text' name='first-name' value='first name' class='fieldedit' />

JS

<script type="text/javascript"> 
    var elem = document.getElementsByClassName('fieldedit');

    function fieldedit() {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
    };

    if(elem){
        elem.addEventListener('focus' , fieldedit , false ) ; 
        elem.addEventListener('blur' , fieldedit , false ) ; 
    }
</script>

`getElementsByClassName` returns an array-like object of elements, not just a single element — Hamms, Jul 21 '17 at 19:32

Jarek Kulikowski · Accepted Answer · 2017-07-21T19:50:30.903

0

You are trying to addEvent listener to an array, you need a specific element. For all fields:

var elem = document.getElementsByClassName('fieldedit');

for (var i=0; i<elem.length; i++) {
    elem[i]. // apply your function here
    // do your processing here
}

edited Jul 21 '17 at 19:50

answered Jul 21 '17 at 19:32

Jarek Kulikowski

1,399
8
9

it only works on one field, but not all the ones that have the same class – jdoe1991 Jul 21 '17 at 19:44
that is correct, you would have to loop it through and array of elements of class`fieldedit` – Jarek Kulikowski Jul 21 '17 at 19:47
im sorry Jarek but how can i do that ? – jdoe1991 Jul 21 '17 at 19:48
for(var i = 0; i < elem.length; i++) { //if condition? } – jdoe1991 Jul 21 '17 at 19:50

Stephan · Answer 2 · 2017-07-21T20:07:35.903

0

document.getElementsByClassName returns something similar like an array of elements. You therefore need:

for(var i = 0; i < elem.length; i++){
    elem[i].addEventListener('focus', fieldedit, false); 
    elem[i].addEventListener('blur', fieldedit, false); 
}

edited Jul 21 '17 at 20:07

answered Jul 21 '17 at 19:32

Stephan

2,028
16
19

it only works on one field, but not all the ones that have the same class – jdoe1991 Jul 21 '17 at 19:44
Then replace the if by (I have updated my answer): `for(var i = 0; i < elem.length; i++){ elem[i].addEventListener('focus', fieldedit, false); elem[i].addEventListener('blur', fieldedit, false); }` – Stephan Jul 21 '17 at 20:06

score 0 · Answer 3 · answered Jul 21 '17 at 19:32

document.getElementsByClassName returns an array try appending addEventListener on the first item of array check this snippet

var elem = document.getElementsByClassName('fieldedit');

function fieldedit() {
  if (this.value == this.defaultValue) {
    this.value = '';
  }
};

if (elem.length > 0) {
  elem[0].addEventListener('focus', fieldedit, false);
  elem[0].addEventListener('blur', fieldedit, false);
}

<input type='text' name='first-name' value='first name' class='fieldedit' />

it only works on one field, but not all the ones that have the same class — jdoe1991, Jul 21 '17 at 19:44

empty the value of the input field

3 Answers3