Solved

Small Javascript function stops if field is null

Posted on 2011-02-17
11
375 Views
Last Modified: 2012-05-11
Hi,

Progressing very slowly learning javascript and my extremely simple function will not run with the error "Cannot read property 'value' of null". I've cut the already minimal code to that shown below and the error is on the if statement testing grade.value

I simply want to test one field value and change another accordingly (I'll use the switch statement when this error has been bottomed out.) The grade field is from a database so null values will exist.

I've tried a few different things and done the usual google search but I'm missing something obvious I think.

Any help appreciated - thanks.
function set_grade_value(field,grade)
{
 var field=document.getElementById(field);
 var grade=document.getElementById(grade);
 if (grade.value=="Grade 1") {field.value="36";}
}

Open in new window

0
Comment
Question by:nigelr99
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 34917260
In your example/code field and grade are string. This string is the respective id attribute of each of the fields that you want to get the value.

<input type="text" id="textbox1" />
<input type="text" id="textbox2" />

Open in new window


somewhere :
set_grade_value("textbox1","textbox2")

Open in new window


for example a button :
<input type="button" value="go go go!!!" onclick='set_grade_value("textbox1","textbox2")' />

Open in new window

0
 
LVL 3

Expert Comment

by:cmgarnett
ID: 34917277
Shouldn't you have quotes around the field names in the getElementId function?

 var field=document.getElementById("field");
 var grade=document.getElementById("grade");
0
 

Author Comment

by:nigelr99
ID: 34917413
OK - so I have a dropdown (select) with id="gr" and a textbox with id="grv", then an onchange event on the dropdown as shown. So when gr changes, grv will be updated with corresponding value.

Sorry, how do your comments relate to my error with the null value? Am I using the .value incorrectly
<select name="gr" id="gr" class="option" onchange="set_grade_value('grv',this)">
<option value="Grade 1">Grade 1</option>
<option value="Grade 2">Grade 2</option>
<option value="Grade 3">Grade 3</option>
</select>

<input class="input" type="text" name="grv" id="grv" maxlength="8" value="100">

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 34917449
<< this >> is not an id here : set_grade_value('grv',this)

a new one for example :
function set_grade_value(field,grade)
{
 var field=document.getElementById(field);
 if (grade.options[grade.selectedIndex].value=="Grade 1") {field.value="36";}
}

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 34917483
with :

<select name="gr" id="gr" class="option" onchange="set_grade_value('grv',this.value)">
<option value="Grade 1">Grade 1</option>
<option value="Grade 2">Grade 2</option>
<option value="Grade 3">Grade 3</option>
</select>

<input class="input" type="text" name="grv" id="grv" maxlength="8" value="100">

Open in new window


we could use :
function set_grade_value(field,val)
{
  if(val=="Grade 1") {
      document.getElementById(field).value="36";
  }
}

Open in new window

0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 34917490
@cmgarnett

>>  Shouldn't you have quotes around the field names in the getElementId function?

Look at the function signature--those are parameters to the function  : )



@nigelr99

You're trying to call getElementById taking in a parameter of "this"... Pass its id instead:
<select name="gr" id="gr" class="option" onchange="set_grade_value('grv',this.id)">

Open in new window

0
 
LVL 3

Expert Comment

by:cmgarnett
ID: 34917525
if (grade.value=="Grade 1") {field.value="36";}

Is the semicolon in the wrong place?

if (grade.value=="Grade 1") {field.value="36"};
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34917553
>Is the semicolon in the wrong place?

no, JS don't worry about that.

if (grade.value=="Grade 1") {field.value="36";var oneMoreThing=0;var oneAgain=1;};
0
 

Author Closing Comment

by:nigelr99
ID: 34917687
Passing (this) instead of (this.value) seems to be the root cause of my problem which you identified in your solution.
Thanks for your help!
0
 
LVL 3

Expert Comment

by:cmgarnett
ID: 34917733
In your function the  var grade=document.getElementById(grade); line is redeclaring the incoming grade parameter. Comment it out so that it looks like this:-

    function set_grade_value(field, grade) {
        var field = document.getElementById(field);
        //var grade = document.getElementById(grade);
        if (grade.value == "Grade 1") { field.value = "36"; }
    }

0
 
LVL 3

Expert Comment

by:cmgarnett
ID: 34917763
What you effectively were trying to do was to declare a new variable called grade which was initially set to be the element found by document.getElementById(grade). As there were no quotes around grade, no element was found and so you had a null object going on to the following line.

Sorry, this was meant to be part of my previous comment.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now