Javascript: var is null
I have this piece of Javascript and it just won't work. I checked everything with JSlint but said everything works. Still not working. Javascript is not in HTML but is linked in<head>
note: I'm working with a local server, so the pageload is instant.
function changeVisibility() {
var a = document.getElementById('invisible');
a.style.display = 'block';
}
var changed = document.getElementById('click1');
changed.onchange = changeVisibility;
Here's the relevant HTML
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
<a href="javascript:addFileInput();">Attach another File</a>
</div>
So what happens is I click on enter, select a file and approve. Then the exchange event triggers and the style of my invisible div are turned on.
The problem is I keep getting this error:
"changed: null: changed.onchange = changeVisibility;"
I don’t understand, I seriously don’t understand what I don’t like here.
EDIT: The question was answered, thanks to Mercutio for your help and everyone else too, of course. Final code:
function loadEvents() {
var changed = document.getElementById('click1');
var a = document.getElementById('invisible');
document.getElementById('addField').onclick = addFileInput;
changed.onchange = function() {
a.style.display = 'block';
}
}
if (document.getElementById) window.onload = loadEvents;
Here's the relevant HTML:
<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
<a href="#">Attach another File</a>
</div>
Also, thanks for the JSbin link , didn't know about it, looks great.
source to share
It is as if the DOM object does not exist at the time it is referenced. Maybe change your code to execute once the document is fully loaded (or put javascript at the bottom of the page).
note: I'm working with a local server, so the pageload is instant.
which is not a problem - the component parts of the document are loaded in order. It doesn't matter how fast they load, some things happen before others: D
The only thing I would like to do now is remove the Javascript link from ...
Put an id there, and inside your function, do this:
document.getElementById('addField').onclick = addFileInput;
Or, since you already have div as variable 'a':
a.firstChild.onclick = addFileInput;
But that obviously leaves you with an invalid anchor tag. Best practice suggests that you should provide a non-javascript way to do this and override this functionality with a javascript method if available.
source to share
You need to wrap your code in a window.onload event handler, a domReady event handler (available in most modern js frameworks and libraries), or at the bottom of the page.
Placing it at the bottom of the page works great, as you can see here .
Decoupling the event responder from your markup extends to the Unobtrusive JavaScript topic and can be handled in a variety of ways. In general, you want to declare event responders on the window.onload or document.ready event.
source to share