Solved

Small Javascript function stops if field is null

Posted on 2011-02-17
11
377 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

 
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

Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

689 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