Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Small Javascript function stops if field is null

Posted on 2011-02-17
11
Medium Priority
?
381 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
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…
Suggested Courses

916 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