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.
Related
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>
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.
I am trying to print something inside my html from a java script. I did this but it don't work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am trying to print <script>go();</script></p>
<script>
function go() {
document.write("Hello World!");
}
</script>
</body>
</html>
You're function hasn't been defined yet in the example you are posting, so call to go effectively does nothing, change the ordering of your script tag
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
document.write("Hello World!");
}
</script>
</head>
<body>
<p>I am trying to print <script>go();</script></p>
</body>
</html>
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.
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.