CODEWITHSUNDEEP
javascripttypeerror
John
John

Reputation: 7910

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

Here is my 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?

Upvotes: 61

Views: 730797

Answers (8)

Nguyễn Ánh Dương
Nguyễn Ánh Dương

Reputation: 1

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target && event.target.value) {
      const value = event.target.value.toLowerCase();
      setSearchTerm(value);
    }
  };

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92735

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.

Upvotes: 0

Mahmoud Abdelsattar
Mahmoud Abdelsattar

Reputation: 1469

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');

Upvotes: 1

OsQu
OsQu

Reputation: 1068

Seems like one of your values, with a property key of 'value' is undefined. Test that i1, i2and __i are defined before executing the if statements:

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

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

Upvotes: 38

Joe L.
Joe L.

Reputation: 4643

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
    }
}

Upvotes: 10

Festus Tamakloe
Festus Tamakloe

Reputation: 11310

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.

Upvotes: 6

Abhijit
Abhijit

Reputation: 895

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.

Upvotes: 6

nfechner
nfechner

Reputation: 17545

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

Upvotes: 14

Related Questions