'Body onload' not working in IE6? - javascript

The <body onload="sample()"> is working in all other browsers except in IE6. window.onload also did not work in IE6. The code is as follows,
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
function sample()
{
alert("hi");
}
</script>
</head>
<body onload="sample()"> ..... </body>
</html>

Change the <script type="application/javascript"> to <script type="text/javascript">, and it works!

With <!DOCTYPE html>, I believe the script type attribute is optional, if the script is Javascript.

Related

Javascript and jquery wont work for some reason

Can someone help me? I wrote simple code in javascript and it wont work for some reason. I tried to figure out but i cant see why. I have downloaded jquery and it is all ok with it, also i tried only javascript code and still same problem. Browser is ok it load jquery and javascript on file i made earlier but doesnt load on this.Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js">
$('#btn').click(function f() {
console.log(1);
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
<head>
<title>Proba</title>
</head>
<body>
<button id="btn">Click</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(
console.log(1);
))
})
</script>
</body>
Try like this :)
You are binding your event handler, before the browser was able to parse your HTML. So #btn element is not in the DOM yet at this point.
Either wrap you code inside document.ready or move the script to the bottom of the body tag.
1st Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function() {
$('#btn').click(function f() {
console.log(1);
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
2nd Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$('#btn').click(function f() {
console.log(1);
});
</script>
</body>
Have you verified "jquery-3.3.1.js" really exists in the current directory? Try instead loading the script through a known host, like Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDITED: Added working code. Note button checking must be done when document has finally loaded.
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function() {
console.log(2);
});
})
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>

jQuery click event not working on HTML page

I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.

Simple onload event not firing?

Just made a basic program to fin the root of my problem and I can't seem to find why this is not working at all.
HTML
<html lang="en">
<head>
<script type="text/javascript" src="carjava.js"></script>
</head>
<body onload="hi()">
hi
</body>
</html>
JS
function hi() {
alert("hi");
}
I want an alert to pop up when the page loads but nothing happens, any ideas?
I can't tell you why it isn't firing, but this should work:
HTML
<html lang="en">
<head>
<script type="text/javascript" src="carjava.js"></script>
</head>
<body>
hi
</body>
</html>
JS
function hi() {
alert("hi");
}
window.onload = hi;
following code is working fine for me:
<html lang="en">
<head>
<script type="text/javascript" src="carjava.js"></script>
<script type="text/javascript">
function hi()
{
alert('hi');
}
</script>
</head>
<body onload="hi()">
hi
</body>
</html>
Its working fine in Firefox & Chrome. Must be something with js file.

Why is body onload not working in chrome

I'm encountering a problem where my body onload="constructor()" is not being run. It works fine for me in firefox but I don't understand why it's not working for me in chrome. Here's the code I'm working with, I made a separate file and deleted everything to the bare minium to try figure out what was going wrong:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Personality Font</title>
<link rel="stylesheet" type="text/css" href="p1.css" />
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
//<![CDATA[
function constructor(which)
{
console.log("IN CONSTRUCTOR"); //In Constructor
var text = document.createElement('p');
text.appendChild(document.createTextNode("BLAH"));
document.getElementsByTagName('body')[0].appendChild(text);
}
//]]>
</script>
</head>
<body onload = "constructor();">
<h1>Personal Fonts: Find the Typeface that Matches Your Personality</h1>
<form>
</form>
</body>
</html>
Chrome has a built-in function with the name constructor. Call the function something else.

SetReadOnly Ckeditor

I'm having a hard time using setReadonly of CKEDITOR. I want to use setReadonly when the Editor is already loaded and ready to be used. I tried using instanceReady:
var editor;
CKEDITOR.on( 'instanceReady', function( ev ){
editor = ev.editor;
editor.setReadOnly( true );
});
but this does not work, I tried using buttons like the sample is using and it works fine. Is there anyway to setReadonly automatically when the editor is ready to be used?
Thanks
It might be better to create it as readOnly instead of waiting for it to finish and then tell it to restart as readOnly.
For example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid', {readOnly: true} );
</script>
</body>
</html>
Fiddle demo
Here you can see how does it work!! For me works right.
http://ckeditor.com/latest/samples/readonly.html
It's simple, use disabled tag in textarea.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid" disabled="disabled">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid');
</script>
</body>
</html>

Categories