Small Javascript function stops if field is null

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

nigelr99Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
cmgarnettCommented:
Shouldn't you have quotes around the field names in the getElementId function?

 var field=document.getElementById("field");
 var grade=document.getElementById("grade");
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
nigelr99Author Commented:
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
 
leakim971PluritechnicianCommented:
<< 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
 
käµfm³d 👽Commented:
@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
 
cmgarnettCommented:
if (grade.value=="Grade 1") {field.value="36";}

Is the semicolon in the wrong place?

if (grade.value=="Grade 1") {field.value="36"};
0
 
leakim971PluritechnicianCommented:
>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
 
nigelr99Author Commented:
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
 
cmgarnettCommented:
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
 
cmgarnettCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.