Javascript onclick function works in everything except FF and IE - javascript

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.

Related

IE9 Bug? <script> content executed twice when using Node.cloneNode(true)

I know IE9 is kind of old now, but it is the lowest version of IE that I still must support in a Web application I'm building.
Anyway, while doing some DOM manipulation and testing in different browsers, I noticed that IE9 was doing something very strange. I had a <script> block in a DIV element, and when I deep-cloned that DIV element using Node.cloneNode(true), and attached the clone to the document somewhere using document.body.appendChild or document.body.insertBefore, the cloned <script> block would get executed again! No other browser exhibits this behavior.
If I'm not mistaken, <script> blocks aren't supposed to be executed when appended to the document after the document has initially loaded, am I right? If I'm correct, is this a bug in IE9?
Here is a simple HTML document where you can see this behavior in action. Create an HTML document with this code and load it up in Internet Explorer using IE9 emulation. You should see an alert popup that says "hey". Next, click the "Click Me" button, and you will see the same popup get executed again!
<!DOCTYPE html>
<html>
<head>
<title>IE9 Script Tag Bug Test</title>
<script>
function ButtonClick(){
var Elem = document.getElementById('mydiv');
var ElemClone = Elem.cloneNode(true);
document.body.insertBefore(ElemClone,Elem);
}
</script>
</head>
<body>
<div id="mydiv">
This is a DIV.
<script>
alert("hey");
</script>
</div>
<button onclick="ButtonClick();">Click Me</button>
</body>
</html>

focus() won't work - query

I have some input field, and I call this in my js file
$(document).ready(function () {$('#input_id').focus(); });
but it doesn't launch. Even, when I launch it in my chrome console, I get no focus. How can it be
This is working sample for a text input, just match with your page code and see what you are missing as compared to this.
I assume that you have referred jquery js already and any other jquery functions work well in your page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function ()
{
$('#input_id').focus();
});
</script>
</head>
<body>
<input type="text" id="input_id"/>
</body>
</html>
In any case please make sure that there is no js error in your page as
$('#input_id').focus(); must work fine individually, so only thing looks wrong could be reference to jquery, else some js error before code reaches to .focus() call on input_id.
Also you can validate if on your page focus for the input working fine, for this keep $('#input_id').focus(); in a script tag just before your body page ends/closes,
to make sure input control, jquery reference are placed correctly and page has no js errors, if this way too focus doesn't work then something is wrong with any of these 3.

FF keeps spinning after document.write()

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

Problem with script execution in Safari

I had a problem with some functionality working in all browsers except for Safari, and I have reduced the problem down to this.
In my page I have the following script declarations at the end of my body element:
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.textchange.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.reveal.js"></script>
<script type="text/javascript" src="../../Scripts/mainScript.js"></script>
Then inside the mainScript.js file, I have put the following code:
$(function () {
alert("found");
});
In all other browsers, it displays a message box, but in Safari it does nothing.
Safari's javascript debugger lists the script, and can see the contents, but for some reason it's not included.
I found this problem since I tried to call a function in mainScript.js from an inline script inside the html page (the inline script was defined below the mainScript.js definition), and the Safari debugger complained that the function was not found anywhere.
What have I done wrong here, and why does not Safari include this script. All the jquery scripts are included and are working fine.
Your code seems good.
I tried with this code
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
alert("Test");
});
</script>
</body>
</html>
and it works fine (Safari 5.0.5 7533.21.1 on Windows 7).
A couple of questions:
Have you tried calling your function manually from the Error Console? Does it work?
If you place a simple alert("Test."); outside of the document ready function, is it displayed?
If you call jQuery's function from the Error Console, what do you get? Do they work?
The problem was found elsewhere in mainScript.js.
{ class: 'someclass' } was sent as parameter to some method, and class is a reserved word.
This should probably have given errors in other browsers as well, but they gladly ignored it and kept on going.
The fix was simply to change it to { 'class': 'someclass' }

document.write with CoffeeScript

I know I am probably doing this wrong because if trying this through try coffeescript feature it works but surprisingly it doesn't emit any result on my example:
<!--http://f.cl.ly/items/1u3Q3W101U2T18162v0V/test.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
</head>
<body>
<script type="text/coffeescript" >
document.write "<h2>TEST</h2>"
</script>
</body>
</html>
The document.write method doesn't seems to output anything to the body, in this case console.log works fine but not document.write
Even after trying to run the script with a onload handler like I use in javascript
var loaded = function(){
alert("hello");
}
document.addEventListener('DOMContentLoaded', loaded);
but then in coffeescript as
loaded = ->
alert "hello"
document.addEventListener "DOMContentLoaded", loaded
it seems neither the event method is being fired as opposed to javascript version
Anyone could help me find out what is happening?
Thanks
UPDATE
if running the console after the page is loaded I can get the following to work without problem:
CoffeeScript.eval('document.write "<h1>testing</h1>"')
but still wondering why the page itself is not showing automatically
Works on Firefox and Chrome but not in Safari
It seems the page is not showing if using Safari 5.0.3
I don't know anything about CoffeeScript, but don't use document.write. It is evil: http://javascript.crockford.com/script.html
Use createElement and appendChild/insertBefore instead:
var p = document.createElement("p");
p.innerHTML = "Lolz";
document.body.appendChild(p);
myDiv = document.getElementById("aDiv");
document.body.insertBefore(p, myDiv);
document.write has problems in Safari as well.
This is a humdinger, but after investigating, I've got your answer:
The way coffee-script.js works is that it looks for, and runs, scripts with type="text/coffeescript" after the document has loaded. In the case of Safari, that means that
<script type="text/coffeescript">
document.write "<h2>TEST</h2>"
</script>
is equivalent to
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
document.write("<h2>TEST</h2>");
}, false);
</script>
which silently fails. Note that making the insertion with the document.createElement method described by Erlend, or with a library like jQuery, will work fine.
Since this works in Chrome, I'd go ahead and call it a Safari bug. But the real moral of the story is: Don't use document.write.

Categories