This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
IE/Chrome: are DOM tree elements global variables here?
Element accessible with ID
I tried this code that is not expected to work:
<html>
<head>
<script>
function change() {
alert("changing !!"+dummy);
dummy.innerHTML="hello !!";
}
</script>
</head>
<body>
<div id="dummy" onclick="change();" > nothing good here !! </div>
</body>
</html>
And it seems to work fine (ff16, ie8, chrome) while dummy is not initialized like it should be via a document.getElementByID('dummy'); is this a html5 feature or just a edge effect?
Now All browser create global variable for each id present in dom. See my Question
dummy == document.getElemetById('dummy') // true
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
My mind has blown. I have a code wich looks (exactly) like this
const A={
B:document.getElementById("plus")
}
A.B.addEventListener("click",()=>{
console.log("1")
})
When i run it, it says "A.B" is null. I tried different versions, but still nothing. Then I copied it right into console and it worked just as expected. I put some console.log statements between object and event listener, and indeed, A and A.B both are null. Though in console they were not. What am I doing wrong?
EDIT: HTML
<!DOCTYPE html >
<html>
<head>
//some other staff
<script src="main.js"></script>
</head>
<body>
<button type="button" id="plus">+</button>
</body>
Oh man.. I got it. Should include my js file after all the DOM is loaded... Such a silly mistake after more than 4 months of practice. Laughing at myself. Thanks
This question already has answers here:
Share data between HTML pages
(4 answers)
Closed 2 years ago.
I have a project I'm working on that has multiple pages. Both of them have a JavaScript tag.
I want to be able to get a variable from the other one.
First HTML
<html>
<head></head>
<body>
<script>
var example = "stringText"
</script>
</body>
</html>
Second HTML
<html>
<head></head>
<body>
<script>
console.log(example)
</script>
</body>
</html>
I have tried making a .js file and saving a variable there and accessing it from the other file but it didn't work, the variable would clear itself when it got to the other page.
It is a possible way to approach.
This question already has answers here:
Is $(document).ready necessary?
(5 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I'm having a problem that has just now started happening for no reason. I'm playing around with a block that detects whether you are using Adblock. It sets a variable, var canRunAds = true; in a file titled ads.js which is not really ads but all adblockers will block it regardless. Next, somewhere in index.html tests to see if canRunAds is defined or not like this:
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../javascript/ads.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
if( window.canRunAds === undefined ){
$("#adblock_off").hide();
$(".adblock_off").hide();
console.debug("adblock enabled");
}
else {
$("#adblock_on").hide();
$(".adblock_on").hide();
console.debug("adblock disabled/nonexistant");
}
</script>
<div>
<img src="../images/adblock_off.png" id="adblock_off"></img>
<img src="../images/adblock_on.png" id="adblock_on"></img>
<p class="adblock_off">Thanks for disabling your adblock!</p>
<p class="adblock_on">Disable your adblock, no ads here!<p>
</div>
</body>
This has always worked for me, however it has stopped working. The script runs the console.debug and it shows up in the console, but the elements wont hide. Any explaination?
PS: This is all documented at this GitHub repo
This question already has answers here:
When do I need to specify the JavaScript protocol?
(5 answers)
Closed 8 years ago.
I have this code:
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<button onclick="javascript:myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
if I change <button onclick="javascript:myFunction()">Click me</button> by
<button onclick="myFunction()">Click me</button>
my code runs normally.
Is that a difference between onclick="javascript:myFunction()" and onclick="myFunction()" ?
That's the javascript: pseudo-protocol, that has got lost. It's used when you have Javascript in an URL, for example:
Hi
An event attribute doesn't support the :javascript protocol, so it doesn't work there. However, it happens to become the same syntax as a label in Javascript, so the code actually still works eventhough the protocol is in the wrong place.
So, in conclusion, the :javascript shouldn't be there, and it's just plain luck that it still happens to work when it is.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 8 years ago.
I am new to javascript, and I just noticed a javascript behavior that I haven't seen documented anywhere. If I have a DOM element with an assigned id, say "x", then in my javascript, that element is automatically assigned to variable x. I see this in chrome and safari. Is this a documented feature of javascript?
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='x'>
<input type='text' name='info' id='info'/>
<input type='submit' name='submit' value='Complete'/>
</form>
<script type='text/javascript'>
window.onload = function() {
alert( x==document.getElementById('x') );
info.value = 'Test me!';
}
</script>
</body>
</html>
When loaded, it will alert true, and the input area will show 'Test me!'. If this is the right behavior, why do we need document.getElementById at all?
This behavior is documented in the HTML standard (chapter 6.2.4).
The standard defines "named elements" which are HTML elements that have either a name or id attribute set. (Note that the name attribute is only defined on certain types of HTML elements.)
For each named element, the browser (environment) defines a corresponding global property.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="w"></div>
<script type="text/javascript">
alert( w );
w = null;
alert( w );
</script>
</body>
</html>
Try this test in IE8. You will figure out that w is global and cannot be overwritten.
Change "w = null" in "var w = null" and reload (after emptying cache)...
IE8 checks for variables before runtime and removes the global correspondent.
I really can't await the day when web developers don't have to support IE8 any more...
HINT: don't use variable names equal to DOM element id's.. OMG OMG
This is an IE-only non-standard feature.
Do not rely on it.