[javascript] Uncaught TypeError: Cannot read property 'value' of undefined

I have some JavaScript code that gives this error

Uncaught TypeError: Cannot read property 'value' of undefined

Code

var i1 = document.getElementById('i1');
var i2 = document.getElementById('i2');
var __i = {'user' : document.getElementsByName("username")[0], 'pass' : document.getElementsByName("password")[0] };
if(  __i.user.value.length >= 1 ) { i1.value = ''; } else { i1.value = 'Acc'; }

if(  __i.pass.value.length >= 1 ) { i2.value = ''; } else { i2.value = 'Pwd'; }

What does this error mean?

The posts here help me a lot on my way to find a solution for the Uncaught TypeError: Cannot read property 'value' of undefined issue.

There are already here many answers which are correct, but what we don't have here is the combination for 2 answers that i think resolve this issue completely.

function myFunction(field, data){
  if (typeof document.getElementsByName("+field+")[0] != 'undefined'){
  document.getElementsByName("+field+")[0].value=data;
 }
}

The difference is that you make a check(if a property is defined or not) and if the check is true then you can try to assign it a value.

You can just create a function to check if the variable exists, else will return a default value :

function isSet(element, defaultVal){

    if(typeof element != 'undefined'){

        return element;

    }

    console.log('one missing element');

    return defaultVal;
}

And use it in a variable check:

var variable = isSet(variable, 'Default value');

You code looks like automatically generated from other code - you should check that html elements with id=i1 and i2 and name=username and password exists before processing them.

Try this, It always works, and you will get NO TypeError:

try{

    var i1 = document.getElementById('i1');
    var i2 = document.getElementById('i2');
    var __i = {'user' : document.getElementsByName("username")[0], 'pass' : document.getElementsByName("password")[0] };
    if(  __i.user.value.length >= 1 ) { i1.value = ''; } else { i1.value = 'Acc'; }
    if(  __i.pass.value.length >= 1 ) { i2.value = ''; } else { i2.value = 'Pwd'; }

}catch(e){
    if(e){
    // If fails, Do something else
    }
}

Either document.getElementById('i1'), document.getElementById('i2'), or document.getElementsByName("username")[0] is returning no element. Check, that all elements exist.

First, you should make sure that document.getElementsByName("username")[0] actually returns an object and not "undefined". You can simply check like

if (typeof document.getElementsByName("username")[0] != 'undefined')

Similarly for the other element password.