I've searched everywhere i could but i did not find a solution to this specific problem.
To put it simple. I have a page with some javascript code and a DIV. I use ajax to load a second page inside that DIV. The loaded page has one element which id is "someid".
someid is <input type="hidden" id="someid" name="someid" value="sdasasdadad" />
then, on the loaded page i call a function that is defined on the "global" page that begins with these two lines:
var=document.getElementById("someid").value;
alert(var);
works fine on firefox but not on IE. On IE it doesnt display the alert and doesnt execute any code after those lines.
I think the problem is that when the javascript code was evaluated, the "someid" element didnt exist yet and IE doesnt seem to understand that now it exists after i loaded a page using ajax. I hope i made myself clear?
I need to do things this way because this is only a small part of a bigger interface. I have no knowledge on jquery but it should work with this javascript code too i guess! How can i make this work?
Thanks a lot in advance!
var is used to declare variables. Do something like var el = document.getEl...
This is assuming your code is exactly the same as your production code, otherwise please show us the real code
EDIT: Since you said it "works" in Firefox, your code is probably inconsistent, since var = 3 in Chrome throws a SyntaxError and I imagine it would do so in Firefox too.
The var word is a keyword in Javascript. Here you are trying to use a keyword as an identifier which is illegal. Using a name other than var like myVar will fix the problem.
var myVar =document.getElementById("someid").value;
alert(myVar);
Try it like that. var is a reserved keyword for javascript
var someVar = document.getElementById("someid").value;
alert(someVar);
I would try debugging this by alerting the element and then the value :
var element = document.getElementById("someid");
alert(element);
var valueOfElement = element.value;
alert(valueOfElement);
I'm sure you haven't but you can't use var as a variable name, it's a Javascript keyword.
Related
so im having an issue with some javascript and html.
in my html i have a button set up with an id
<td><button id = "accept">Accept</button></td>
and in the javascript onload function i have
acceptButton = document.getElementById("accept");
But for some reason it just started to say, variable implicitly declared , and when i try add anymore javascript, the button does not function. I am very new to javascript and really struggling to work out what this issue is due to, can someone maybe shed some light on it? thanks
I tried adding var, it takes away the error but stops the buttons functionality
Use the var keyword to declare your variable:
var acceptButton = document.getElementById("accept");
It was because I loaded the javascript file at the top of the HTML before the DOM loads
I'm trying to create a test that checks the body of a webpage for a particular class using vanilla JS
currently my code looks like this
var whole = document.getElementsByTagName("body")[0];
whole.classList.contains("desiredClass");
this returns "false" on a class even though it exists in my body.
I have attempted to redefine whole as
var whole = document.body
and received the same result
Question: what is my code missing? I felt this was a pretty straightforward test, but I am certainly missing something
EDIT:
My classList function works, but was not searching for DIV classes within the body.
How do I narrow the search within the document.body to search all div classes?
It's not good to findElementByTagName in this case. Using the document.body instead is much better.
Anyway, your code seems to be ok. Maybe it's browser compatibility issue?
Here you can see which versions of browsers supports classList property of DOM element: classList doc
You can use this solution. It is much certain.
var classes = document.body.getAttribute('class').split(' ');
var contains = classes.indexOf('desiredClass') > -1;
I know this is silly but i really don't understand what is going on, i am calling a simple getElementsByTagName from my js like this :
var script_elements = document.getElementsByTagName('script');
//then i loop
for(a = 0; a < script_elements.length ; a++)
{
alert(script_elements[a].getAttribute('src'));
}
but it doesn't alert all the script elements with src defined that exists, i thought probably the document isn't fully loaded that is why i was having this problem, and to be sure i added in the beginning before calling getElementsByTagName this document.getElementsByTagName('html')[0].innerHTML and i do get the source code and nothing is missing, the only solution i found is to use regex and capture what i want but it is pretty dumb considering that JS has simple built in methods.
thanks in advance.
I was waiting for someone to do the honors and thus accept it, but since none did i will do it as it might help others, so thanks a lot to you guys the $(document).ready() did it :
$(document).ready(
var script_elements = document.getElementsByTagName('script');
for(a = 0; a < script_elements.length ; a++)
{
//treatment
}
)
From my experience, getElementsByTagName always returns all elements but alert does not always show an alert. I would use console.log instead of alert. That will always log the element.
I am curious about using getAttribute instead of the src property of the element. I don't have a good reason for this, but I don't use getAttribute when there is a property in the dom that will work as well. Put another way, I only use getAttribute to access attributes that I define and the dom knows nothing about. My point is that I am weak on what getAttribute will return for the src attribute in every case, but I know that console.log will tell you, even if it is null which alert will not do (in my experience, I have not read the spec, so I do not know what alert is supposed to do)
For those concerned that you have to wait for the document to load, that is not my experience. Unless you put defer on the script tag, scripts load in sequence. As long as this script occurs in the document after the scripts that you want to inspect, you will see them.
I'm having an issue trying to fix a conflict between both libraries and have used the noConflict in some sections, however I keep getting the $active is null error
I'm specialized in server-side scripting and not in Javascript (nor have time to read some documentation) so would appreciate any help.
Here is my code:
First (I'm just guessing here) jQuery adds a class which will be used later
jQuery(".paging a:first").addClass("active");
Now, it's time to use that class
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
Since the code is for a slider the error appears every time this line is reached so my question is... Is there any way I can remove the $ and still use jQuery in that line?
P.S: I'm using jQuery 1.6.1 min and MooTools 1.2 although I doubt this is relevant I know they have conflicts so probably the source of this error.
To select an element by it's class in jQuery you need to use CSS style notation in a jQuery object, which in your example would be jQuery(".active"). Try this:
var triggerID = jQuery(".active").attr("rel") - 1; //Get number of times to slide
To use your original code, you'd need to assign the $active variable to be the jQuery object containing the element, like this:
var $active = jQuery(".paging a:first").addClass("active");
var triggerID = $active.attr("rel") - 1; // This will now work, assuming it's in the same scope as the above.
$active has nothing to do with jQuery in this case (though it might be a jQuery variable). In javascript you can name variables "$something" without a problem, and it doesn't collide with something named simply "$", which is another variable-name altogether. It's like saying you have removed all references to the variable "car", but don't understand why you get an error complaining about the lack of a "carpet". They're totally independent, thus the code you have posted is insufficient to see what is wrong.
[Edit]
If this sounded harsh in some way it's just me having a problem formulating myself in an understanding way on this matter, as I was simply trying to educate, not implying that this is something that you should know. It's an error a lot of peoples do in javascript (at least several I know of).
It should just be a matter of replacing $ with jQuery wherever you would normally use $.
So, instead of the typical:
$('.active').attr('rel')
use:
jQuery('.active').attr('rel')
$active is a javascript variable (they chose to put the $ in front of it to help them remember it stores a jQuery object, but the behavior is the same).
So, replacing every instance of $active by active should still work. I don't know ifit will solve your problem though.
One other thing you should try is putting your code in a closure:
(function($){
// your code
})(jQuery);
That way, inside of the closure, $ will only reference jQuery
I create a span with a global variable like this:
var $span = jQuery('<span></span');
jQuery($span).append('<img src="myimage.gif"/>');
jQuery($span).insertAfter('#username');
It works but I would like to remove the span in some part of my code.
I try with:
$span.remove();
but it doesn't work.
Thanks!
That's because $span doesn't exist in the DOM yet, thus it cannot be removed.
If you were to do this:
var $span = jQuery('<span></span'); // missing >
jQuery('body').append($span);
$span.remove();
That would both add it to the DOM, then remove it again.
Also as pointed out by Richard D, you're missing a > on your closing span tag.
You really need to post the full code for questions like this. It makes it really difficult for people to help you if they can't see what you're doing in context.
That said, if $span.remove() does not remove the <span>, then plainly and simply $span is not referencing what you think it is. Either it's another element or it's undefined.
Where are you making it a "global" variable (bad idea by the way)? In javascript there really isn't such a thing as a true global variable -- they are only defined for for the context they are in. If the immediate context is your document (i.e. <script>var myVar = 'foo';</script>), that's for all intents and purposes a "global" variable, but anything else is a "local" variable.
Basically, use console.log or similar to introspect the value of $span in the place where you're trying to utilize it. If it's undefined (which my best guess is that it is), then figure out why it's not defined in the context your working in.