FF keeps spinning after document.write() - javascript

<html>
<head>
<script type="text/javascript" >
function fn() {
document.write("Hello there!!!");
}
</script>
</head>
<body>
<button onclick="fn()">click</button>
</body>
</html>
After clicking the button , FF keeps on spinning (11.0), while as if I directly call the fn() without wiring it to the button , it works fine.Could anyone please look into this ?

You need to call document.close(). document.write calls document.open if the document hasn't been opened. As long as the document isn't closed again with document.close the browser will indicate that the page is subject to change.
function fn() {
// implicit call to `document.open();` before document.write
document.write("Hello there!!!");
document.close();
}

Related

addEventListener() not responding

I have written a small program to pop up an alert on click of a button using an addEventListener() . PFB the code below:
html file
<html>
<head>
<title>name alert</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input id="p" type="button" value="alert">
</body>
</html>
javascript file
document.getElementById("p").addEventListener("click",greet,true);
function greet(){
alert("hello there !");
}
I dont get a pop up screen this way both the files are in the same folder btw.
test.js loads and executes before the DOM is loaded. So, at that point #p returns null. Try listening to onload event, and add click event.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("p").addEventListener("click",greet,true);
});
// global scope
function greet(){
alert("hello there !");
}
<input id="p" type="button" value="alert">
try to move your
<script type="text/javascript" src="test.js"></script>
just before
</body>
You need to put the addEventListener inside a function that is called on the load event. As the page is being created it will run the javascript as it comes to it. If it hasn't created the HTML yet, when the addEventListener runs it won't find the 'p' element and it will give you an error.
You can also move the javascript to be after the html, but it's more organized to put it in something like this:
<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)
function pageload()
{
document.getElementById("p").addEventListener("click",greet,true);
}
</script>

addEventListener not working on any browser

I ran the below code and tried it on all browsers but it didn't work
//HTML Code
<html>
<head><title>Test</title></head>
<body onload="LaunchImageSlider();">
<script type="text/javascript" src="Scripts/javascript code.js"></script>
</body>
</html>
//javascript code.js
function LaunchImageSlider() {
window.addEventListener("load",function() {alert("Hi")});
}
I did not get any alert message. My actual aim is to create an image slider once the page is loaded so I began first by seeing whether the "addEventListener" works.
What am I doing wrong here?
I referred to the below questions already, but nothing helped:
addEventListener is not working
addEventListener() not working
addEventListener not working
addEventListener in javascript
A possible solution:
<html>
<head>
<title>Test</title></head>
<body>
<script type="text/javascript" src="Scripts/javascript code.js"></script>
<script type="text/javascript">
(function () {
LaunchImageSlider();
})();
</script>
</body>
</html>
But in the function you should not add and eventListener, as it is run after the window has loaded. You should just run the callback method directly. So using your example:
//javascript code.js
function LaunchImageSlider() {
alert("Hi");
}

Empty document and stop further javascript

I'm writing a small script that determines if the user is on IE8 or below. If they are, the script should completely empty the document (body and head) and stop any further script executing.
I've played around with document.write() but can only get this working with window.onload. But I want it to execute as soon as it knows the browser version (which is when the script executes).
Example page setup:
<html>
<header>
Some CSS
Some meta
...
</head>
<body>
Page content
<script>
if (IE < 8) { //in reality I have a function to determine this
document.write('You browser is outdate. Please upgrade to view this site.');
}
</script>
<script src="more-scripts"></script>
</body>
</html>
This doesn't work but if I wrap the script in a window.onload it does. But then the page flashes up before the code executes. How can I get this to work?
Rather than using document.write() to print a message, you can use the .innerHTML property of the document.body element to entirely replace the body of the page. For this technique, your browser-check script should go in the head section, not the body (this is usually where scripts like this would go anyway).
<html>
<header>
Some CSS
Some meta
...
<script>
if (IE < 8) { //in reality I have a function to determine this
document.body.innerHTML = "You browser is outdate. Please upgrade to view this site.";
}
</script>
</head>
<body>
Page content
<script src="more-scripts"></script>
</body>
</html>
you could use conditional comments for that:
<!--[if IE 8]>
<script>
document.body.innerHTML = '';
document.write('You browser is outdate. Please upgrade to view this site.');
</script>
<![endif]-->

Javascript onclick function works in everything except FF and IE

I have written a simple quiz in javascript and it works fine in my browser of choice, but when I tested it in IE and FF the buttons don't work. I get a "ReferenceError: Option1button() is not defined"
even in this little bit of code I get the same error:
<!DOCTYPE HTML >
<html><head><title></title></head>
<body onload="loadPlayer();">
<script type="text/javascript">
function Option1button(){
document.getElementById("op1").style.display = 'none';
}
function loadPlayer() {
document.write("<div id=\"op1\"><button onclick='Option1button()'>choose</button> OPTIONS <br></div>");
}
</script>
</body>
</html>
You CANNOT use document.write anywhere except code that runs immediately.
If you are trying to defer it so that the button doesn't appear until the function is defined, just do this:
<body>
<script>function Option1Button() {...}</script>
<div id="op1">...</div>
Since scripts block the page from loading, the button won't appear until the function is ready to be called.

javascript tag trigger - code position on page

i use that tag to alert me when a tag has been shows up
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
<iframe></iframe>
</body>
</html>
strange , since this code working :
<html>
<head>
</head>
<body>
<iframe></iframe>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
</body>
</html>
why the Js need to under the tag to work?
what's the problem here?
Because the code in a script tag is executed immediately. And in the first example the iframe doesn't exist at that time. But what you can do is to wrap you code into an onload (for the main page) event. E.g.:
window.onload = function() {
//your code
}
Then it doesn't matter where the code is placed.
Iframe tag does not exist at the moment you are trying to access it.
You may check that by simply alerting array length, like
alert(document.getElementsByTagName('iframe'));
Have you thought about executing your javascript after the page is loaded? You may use some frameworks like jQuery to facilitate crossbrowser issues. Or just put all your javascript code to the very bottom of body.

Categories