/    Sign up×
Community /Pin to ProfileBookmark

define var

Copy linkTweet thisAlerts:
Jul 16.2012

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.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ibixxonJul 16.2012 — 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..
Copy linkTweet thisAlerts:
@Declan1991Jul 16.2012 — 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.
Copy linkTweet thisAlerts:
@jeffapauthorJul 17.2012 — 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:

[code=php]
// function.js

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

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

[code=php]
// 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>
[/code]

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...
Copy linkTweet thisAlerts:
@SparoHawkJul 17.2012 — 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');[/CODE]
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.
×

Success!

Help @jeffap spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...