define var

**jeffap** · 07-16-2012 10:40 AM

sorry i have a stupid question

i have made some functions to control the class of some divs, and i m using a lot of document.getElementById('divname').style.

my functions work pretty well, but i found it quite clumsy to write many document.getElementById('divname') so i tried to define variable like:

var a = document.getElementById('divname');

and used it as:

a.style.display='none';
OR
a.innerHTML='bla bla bla';

but somehow they do not work

i wonder what the problem is, whether there is any way to make my code neat and simple.

Thank you for your help in advance.

**ibixxon** · 07-16-2012 12:54 PM

It shuld work normally . Class or Id ?? Be sure not use one Id for two divs. And getElementsByClass may not be available for older versions of browsers, you myt want 2 implement that..

**Declan1991** · 07-16-2012 05:21 PM

You are probably calling that before the element is made. Either call it in a function on page load or just put the JavaScript after the element.

**jeffap** · 07-17-2012 12:10 AM

i just took some elementary javacript class so i thought this must have violated some basic principle *blush*

anyway i will put the code here for easier reading:

PHP Code:


// function.js

var a=document.getElementById('email');

function x() {
    a.focus();
}
function y(){
    a.value="";    
    a.disabled=false;
}
function z(){
    a.disabled=true;
}

PHP Code:


// email.php

<html>
<head>
<script type="text/javascript" src="../scripts/function.js"></script>
</head>
<body>
<input id="email"></input>
<a id="button1" href="javascript:x()"></a>
<a id="button2" href="javascript:y()"></a>
<a id="button3" href="javascript:z()"></a>
</body>
</html>

i tested yesterday on google chrome browser and when i click button1 the input email does not get focused

by the way i do not want to use getElementsByName because i heard that it does not support older version browser...
getElementsByClassName does not seem to be a good idea in this situation...

**SparoHawk** · 07-17-2012 10:33 AM

You have a basic mistake a lot of JavaScript newbies make, fret not. ^^

The problem is you have this statement:

Code:

var a=document.getElementById('email');

Remember HTML, JavaScript and CSS are executed as the browser reads from top to bottom. Because you have that when the browser gets to your script it will see it is being told to get a reference to an element with ID email which STILL does not exist, since the browser has not yet gotten to the part where it is told that "hey, there's this HTML input element here with ID email".

So, you'd try what most of us tried: putting the script call AFTER the HTML and viola! It works! The world is perfect again. Then you'll go to read its "bad practice" to put <script> inside the body, so you learn about: window.onload = function(){ //paste all your onload code here }.

With this new method you find that you can still retain your perfect world while still complying to general coding standards. So, happy we are! And yes, you can do this without a problem and its cross browser compatible too.

So for now, its a good idea to do window.onload when you need to fill in vars that make reference to yet to be loaded HTML elements. Right! What onload does is that it eecutes whatever you told it AFTER the HTML skeleton is loaded (sadly, this includes images too).

Further on, as you read you'll come onto the readychangestate and <script defer> methods. So untill you get there (or just use jQuery), continue learning. And happy scripting!

TIP: IMO Firefox is one of the best browsers to test JavaScript in, as there is a tool called Firebug which lets you see JavaScript errors. All browsers now sport an error console, but Firebug is more complete and user friendly.

Thread: define var

Thread Tools

Display

define var

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions