HTML error cannot set property of null (anonymous function) - javascript

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/

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

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);
}

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.

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 */ }
//]]>

Related

I cant pick the value of input using jquery

$('.submit__form').on('click', function(e) {
e.preventDefault();
var id = '.' + $(this).data('id');
var person__name = $('#person__name').val();
var person__email = $('#person__email').val();
var booking__participants = $('#booking__participants').val();
alert(person__email || 'none');
// if (person__email === '' || person__name === '' || booking__participants === '') {
// alert('Preencha os campos obrigatórios.');
// } else {
// $(id).submit();
// }
});
I don't know why, but i can't pick the value of the person__name and person__email, the most strange part is that i can pick the value in the console on the browser... someone knows what could be causing this?
This is not a problem of html the 2 inputs fields have the id person__name and person__email.
The code is in a external file, and i am calling that in the bottom of my html.
HTML:
<form>
<input id="person__name" name="person.name" type="text" />
<input id="person__email" name="person.email" type="email" />
<a class="submit__form">Submit</a>
</form>
I cant use the submit input.
UPDATE:
The scripts in the bottom of the page:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.6.0/headroom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js"></script>
<script src="/client/scripts/main.js"></script>
Inside the main script:
(function() {
//code
})();
If you want to alert the name, make sure you use the name in the jQuery
alert(person__name || 'none');
// Not:
alert(person__email || 'none');
http://jsfiddle.net/376fLujs/3/
Also, make sure your script is included properly. Include the jQuery before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="local.js" type="text/javascript"></script>
add: console.log("working"); as the very first line of your script
open the chrome console / Firebug and refresh your page.
if you don't see "working" in the console, your javascript is not included properly.
Edit: based on your comments again. If you have multiple forms, re-using the same ID, it will not work. Always keep IDs unique. Since your link is inside of the form like your input, you could do this:
var person__email = $(this).parent().find("input[name='person.email']").val();
// DRX points out that escaping may be necessary:
var person__name = $(this).parent().find("input[name='person\\.name']").val();
http://jsfiddle.net/376fLujs/4/
I would say try using this for your event handling:
$(document).on('click', '.submit__form', function(e) {
//code here
});
The reason it might not be working is because the element might not yet be created when the script loads. This should take care of that issue.

Add an attribute to html element with javascript on page load?

What I've tried:
function addAttribute(){
document.getElementById('myid')...
};
window.onload = addAttribute;
How can I add add the attribute to my element with id="myid" ?
document.getElementById('telheaderid').yourattribute = "your_value";
For instance
document.getElementById('telheaderid').value = "your_value";
Using jQuery:
$('#telheaderid').attr('value', 'your_value');
EDIT:
Focus is the event that fires up when an element get focused or for instance when we click on the textarea it highlights thats the time.
Using jQuery:
$('#telheaderid').focus(function() {
$(this).val('');
// run any code when the textarea get focused
});
Using plain javascript:
document.getElementById('telheaderid').addEventListener('focus', function() {
this.value = "";
});
Use this:
document.getElementById('telheaderid').setAttribute('class','YourAttribute')
The W3C standard way:
function functionAddAttribute(){
document.getElementById('telheaderid').setAttribute('attributeName', 'attributeValue');
};
window.onload = functionAddAttribute;
for IE:
function functionAddAttribute(){
document.getElementById('telheaderid').attributeName = 'attributeValue';
};
window.onload = functionAddAttribute;
Enjoy your code!

Calling Javascript method defined above on page load

I am brand new to JavaScript so bear with me. I have a JavaScript function that is on my page:
<script type="text/javascript">
Sys.debug = true;
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target",
});
});
</script>
It works perfectly when I use it as an event:
<input type="button" onclick="popup.show()" value="Edit Theme" style="float: right; margin-right: 7.25em;" />
I want to call it on page load, inside the body tag I have the following code:
<script>
window.onload = popup.show;
</script>
The method does not appear to get called. What am I doing wrong?
Based on the documentation on Sys.Require, it seems that Sys.Require is called on load, which means that based on the ASP.Net page lifetime the script hasn't loaded when the onload event fires.
It looks like you can use Sys.onReady() instead:
Sys.onReady(function(){
popup.show();
})
You should write:
window.onload = popup.show;

Calling javascript function

I have the problem, that my javascript function isn´t when I press the button:
<script type="text/javascript" language="javascript">
(function ($) {
$.fn.addToList = function (opts) {
var input = $(this);
opts.button.click(function () {
opts.list.append("<li>" + input.val() + "</li>");
});
};
}(window.jQuery));
$("#zutat").addToList({
button: $("#btn"),
list: $("#list")
});
</script>
and
<input type="text" id="zutat" name="zutat"></input>
<input type="button" id="btn" value="Click">
<ul id="list"></ul>
How do I call this javascript function? What is my problem?
If your script tag is before the #zutat" stuff, then you are trying to manipulate on #zutat when the DOM elements are not ready yet. In this case, When the jQuery selector is being executed, it will not match the elements, since they are not available yet.
To fix it, you should wrap your codes by the $(document).ready function or put it at the bottom of body tag.
<script type="text/javascript" language="javascript">
(function($) {
$.fn.addToList = function(opts) {
var input = $(this);
opts.button.click(function() {
opts.list.append("<li>" + input.val() + "</li>");
});
};
$(document).ready(function() { // <<<<<<< execute after document ready.
$("#zutat").addToList({
button: $("#btn"),
list: $("#list")
});
});
})(window.jQuery);
</script>
I think you should move the parenthesis this way
})(window.jQuery);
In Firefox (I am using Firebug to test this) if you do this
function(){ alert("GONG"); }();
It gives you an error but if you wrap the function with parenthesis
(function(){ alert("GONG"); })();
The anonymous function will be executed.
You should also wrap the call to the dom elements in a $(document).ready(); call as showed in qiao's answer.
if you want to add <li>s to a <ul> when you click a button, you are going about it in a very round about way. you don't need to extend jquery or object prototype to do that.
try the following
$("#button").click(function() {
var val = $("zutat").val();
$("#list").append($("<li>" + val + "</li>"));
});
Normally the click event is handled like this
$('#btn').on("click",function(){
// code
});
I don't know what your code does exactly but not that what you want.

Best way to modify an element that is not yet created

I have an <input> field in my web page, and I want to add a particular method on it, let say fooBar().
Here is what I do:
<input id="xxx" .../>
<script type="text/javascript">
$("xxx").fooBar = function() { ... };
</script>
This works well. However, for some reasons I will not detail here (in fact the HTML is generated by JSF components), the <script> will be declared before the <input> tag.
So in others words, I will have that in my HTML:
<script type="text/javascript">
$("xxx").fooBar = function() { ... };
</script>
<input id="xxx" .../>
So of course this code will not work correctly, as the script will try to get ($("xxx")) and modify an element that does not exist yet.
If I want to stick on the exact order of these two tags, what is the best way to accomplish what I want?
Edit
In my case, $ refers to prototype, but I am also using jQuery in my application. And I must be compatible with IE6 :o(
You need to run your script after the document is loaded. With jQuery you'd do that with:
$(document).ready(function () {
//do stuff here
});
I can't tell which library you're using here, but they all have an equivalent of jQuery's document ready.
Here's the prototype equivalent:
document.observe("dom:loaded", function() {
// do stuff
});
Try putting your code in load event:
$(window).load(function(){
$("#xxx").fooBar = function() { ... };
});
If the code has to be directly before the input, you can check if it has loaded after a certain period of time.
<script type="text/javascript">
//Sets up a function to execute once the input is loaded
f = function ()
{
//Checks if 'xxx' exists (may vary between frameworks)
if ($("xxx") !== undefined)
{
$("xxx").fooBar = function() { ... };
//Escapes the timer function, preventing it from running again
return true;
}
//If still not loaded check again in half a second (0.5s or 500ms)
setTimeout(f,500);
return false;
}
f();//Initialize the timer function
</script>
<input id="xxx" .../>
Instead of adding a method to the dom node, why not make it a separate function, so instead of
$("xxx").fooBar = function() {
doStuff(this);
};
you would have something like
function xxx_fooBar () {
var me = document.getElementById('xxx');
doStuff(me);
};
Another suggestion: If you can add attributes to the <input> element, you could do something like this...
<script>
function xxx_init (e) {
e.fooBar = function () {
doStuff(this);
};
}
</script>
<input onload="xxx_init(this)" id="xxx" .../>
Or you could do as others suggest and attach the scripts to the window.onload event.

Categories