HTML error cannot set property of null (anonymous function)

Question

I'm trying to store a textbox value to local storage however I'm catching an Uncaught TypeError: Cannot set property 'onclick' of null and not sure exactly why. Everything seems to be referenced correctly. Any insight would be appreciated.

<script type="text/javascript">
var save_button = document.getElementById('Save')
save_button.onclick = saveData;

function saveData()
{
    var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.value);
    var storedValue = localStorage.getItem("server");
};
</script>    

<label for="serveri">Server:</label>
<input type='text' name="server" id="saveServer" />
<button onclick="saveData()" type="button" value="Save" id="Save">Save</button>

If the above doesn't show my problem, here is the whole in JSFiddle: http://jsfiddle.net/mGfeu/

Why do you have an inline handler as well as a defined listener? — tymeJV, Oct 23 '13 at 13:23

score 1 · Accepted Answer · answered Oct 23 '13 at 13:26

1

Write the script after the body. The DOM isn't loaded when your script executes. Hence there is no element with id 'Save'.

answered Oct 23 '13 at 13:26

Sandeep Nayak

4,649
1
22
33

score 1 · Answer 2 · answered Oct 23 '13 at 13:30

1

Your code is run before the DOM is ready (so the .getElementById cannot find your element)

Change your code to

// attach events for all browsers
var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
  document[eventName](prefix + "load", init, false);


function init() {
    var save_button = document.getElementById('Save');
    save_button.onclick = saveData;
}

function saveData() {
    var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.value);
    var storedValue = localStorage.getItem("server");
    alert(storedValue);
}

answered Oct 23 '13 at 13:30

Gabriele Petrioli

191,379
34
261
317

@DenisTulskiy because that is the cross browser way to do it – Gabriele Petrioli Oct 23 '13 at 15:23
I'm so glad I don't have any reasons not to use jquery – Denis Tulskiy Oct 23 '13 at 16:19
@denis agreed, although if the only use is for the `load` event, jquery is overkill.. – Gabriele Petrioli Oct 23 '13 at 16:31

score 0 · Answer 3 · answered Oct 23 '13 at 13:21

0

You are looking for the element before it is rendered on the page.

Your fiddle is messed up since you included the script block in the HTML markup and in the JavaScript panel. The one in the HTML markup is firing the error since it is not running at onload or document ready.

answered Oct 23 '13 at 13:21

epascarello

204,599
20
195
236

in my actual project the js is referenced at top of index only. figured id seperate it out for jsfiddle. – user2892178 Oct 23 '13 at 13:27
The problem is still the fact you are calling it before the element is rendered. It is like me calling your name before you walked into the room. I will get no response. Run the code on window.onload or document ready like I said in my answer. – epascarello Oct 23 '13 at 13:30

score 0 · Answer 4 · answered Oct 23 '13 at 13:32

Your fiddle works if you take out the script (you just need to include the html from the body) and put it in the js area only, because that is using an onload script to render:

http://jsfiddle.net/spacebean/mGfeu/1/

It's returning the localStorage element correctly and everything is being set fine.

For your code just make sure to wrap it in an onload event, e.g.:

<script type="text/javascript">
//<![CDATA[
    window.onload=function(){ /* your js here */ }
//]]>

HTML error cannot set property of null (anonymous function)

4 Answers4

Linked