I have a webpage, and it is running index.html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<style>#import 'main.css'</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="main.js"></script>
<body>
<canvas id='svs'></canvas>
</body>
</html>
For some reason, when I try to use c = document.getElementById('svs') in main.js, it just returns null. What am I doing wrong and how can I access document in main.js?
Edit:
I'm using socket.io and express and am sending index.html through res.sendFile.
I'm sending main.css and main.js through a folder with express.static.
Another thing you can do is to put your code in main.js inside a function, and then add onload to <body>:
<body onload="yourfunction()">
The template should be laid out in the following manner.Style and script tag should go under the wings of head tag.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style>#import 'main.css'</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id='svs'></canvas>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Assignment 4</title>
<script src="script.js"></script>
</head>
<body>
<h1>Biryani</h1>
<h2 id="hello">Rohan</h2>
<p>Biryani is Pakistan's special dish. Main Ingredients are rice and chicken.</p>
</body>
</html>
script.js
<-- this script is used to getelementbyid "hello" and then displaying on console.-->
var myname = document.getElementById("hello");
console.log(myname.innerHTML);
const el = document.querySelector('h2');
el.textContent = 'Assignment 4';
The code is correct. You just need to move your script tag just before you close the body tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Assignment 4</title>
</head>
<body>
<h1>Biryani</h1>
<h2 id="hello">Rohan</h2>
<p>
Biryani is Pakistan's special dish. Main Ingredients are rice and chicken.
</p>
<script src="./script.js"></script>
</body>
</html>
You should include js below of your element definitions.
Browser is compiling html scripts from top to below. If you included js code before all elements defined then that catch nothing and it returns error.
...
// your elements are defined here.
<script src="script.js"></script>
</body>
Can someone tell me why the following line works from the dev tool console but does not work in the page, I keep getting length as 0
$("iframe[name='gridFrame']").contents().find("form[name='grid']").length;
This is the page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="/Scripts/jquery-3.1.1.js"></script>
<script>
$(function () {
submitThis();
function submitThis() {
var a = $("iframe[name='gridFrame']").contents().find("form[name='grid']").length;
console.log(a);
}
})
</script>
</head>
<body>
<iframe name="gridFrame" src="temp-iframe-test.html">
</iframe>
</body>
</html>
And this is the iframe file:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="grid">
<input id="fname" />
</form>
</body>
</html>
your submitThis() function is firing before your iframe has loaded its source. That is why you see a length of 0.
Try adding:
onload="submitThis()" to your iframe element and moving your submitThis function into global scope (out of the $ function).
When using the dev console, your iframe has since loaded its file.
Can someone please help me work out why this is not working??
I have checked and triple checked that the js files are linked correctly.
Am I missing something really obvious? This is exactly how they said to use it! :(
What I am trying to use :
http://circletype.labwire.ca/
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Heroes and Villians</title>
<link rel="stylesheet" href="ma.css">
<script src="modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<h2 id="title1">Heroes</h2>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="circletype.min.js"></script>
<script>
$('#title1').circleType({radius:384});
</script>
</body>
</html>
Thank you in advance for your help
Lettering.js is missing so please link this script http://circletype.labwire.ca/js/plugins.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Heroes and Villians</title>
<link rel="stylesheet" href="ma.css">
<script src="modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<h2 id="title1">Heroes</h2>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="circletype.min.js"></script>
<script src="http://circletype.labwire.ca/js/plugins.js"></script>
<script>
$('#title1').circleType({radius:384});
</script>
</body>
</html>
I have a test.aspx page.
The html code is
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>"test Application"</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head> ...
But when I am executing this page, it is throwing the following error.
can't execute code from a freed script.
When I search in google, I got the answer as Meta tag should be after script tag.
Is it recommended to put script tags after meta tag in .aspx page.
The correct syntax is
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>"test Application"</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
</head>
<body>
</body>
</html>
Or You can put the script tag inside the body after the closing of form tag.
You should do some reading on basic HTML structure http://www.w3schools.com/html/
Your script tags need to be inside the <HTML> element. Ideally at the end of the body tag...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
<form id="myForm" runat="server">
<!-- you html elements -->
</form>
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
</body>
</html>
The doctype is important to get the page to render in standards mode. However with the (almost) release of HTML5 you should be using it as it provides many more elements to take advantage of. Example below..
<!doctype html>
<html lang="en">
<head runat="server">
<title>test Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
</head>
<body>
<form id="myForm" runat="server">
<!-- you html elements -->
</form>
<script src="scripts/test.js"></script>
<script src="scripts/abc.js"></script>
</body>
</html>
meta script title should be inside the head tag. You can also load the scripts in the end of the body to increase page loading performance.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type='text/javascript' language='javascript' src="scripts/test.js"></script>
<script type="text/javascript" language='javascript' src="scripts/abc.js"></script>
<title>"test Application"</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
</body>
</html>
This is my html file. The angular.js file is under java/main/webapp/js folder and Intellij can see it when I click on it, yet the code does not work! I get a print on screen {{helloMessage}} and not "hello world"
What am I missing here?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular test </title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
Angular test
<script src="js/angular.js"> </script>
<script type="text/javascript">
function HelloWorldCtrl($scope){
$scope.helloMessage="Hello World";
}
</script >
</body>
</html>
You forgot ng-app , put it in the body tag:
<body ng-app>
Have a look at working example.