This question already has answers here:
What does "use strict" do in JavaScript, and what is the reasoning behind it?
(30 answers)
Closed 2 years ago.
this code gives error which makes perfectly sense
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
usestricr
</script>
</body>
</html>
but this doesn't why
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
"usestricr"
</script>
</body>
</html>
please help i'am noob in this
So that triggering strict mode in JS engines that support it wouldn’t cause errors to be thrown in older engines, the code to trigger it is just a string.
Putting a different string there is still just a string which is still syntactically valid even if semantically nonsense.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 3 years ago.
I am trying to run a program but when I put the javascript getElementById method in header section then the code is not executed but when I put it in body section below my html then it gets executed. Please tell me the reason
<html>
<head>
<script type="text/javascript">
document.getElementById("addition").innerHTML= 5+6;
</script>
</head>
<body>
<span id="demo"> 5+6 =</span><span id="addition"></span>
When you add a Javascript code in the header, it runs before the body. So, in that moment, there is no element with id "addition" yet.
To keep that simple, you should add your script in the bottom of your tag.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<span id="demo"> 5+6 =</span><span id="addition"></span>
<script type="text/javascript">
document.getElementById("addition").innerHTML= 5+6;
</script>
</body></html>
Another option is putting your code in a function and calling that function into the onLoad attribute on the body tag.
<html>
<head>
<title>Hello World</title>
<script type="text/javascript">
function letsDoIt(){
document.getElementById("addition").innerHTML= 5+6;
}
</script>
</head>
<body onload="letsDoIt()">
<span id="demo"> 5+6 =</span><span id="addition"></span>
</body></html>
More info about events order can be found here https://javascript.info/onload-ondomcontentloaded.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
For your information, this is not a duplicate - my question was not solved by similar questions .
I am trying to log this element:
<p id="one">Test</p>
to the console with JavaScript:
var one = document.getElementById("one");
console.log(one);
However, this returns null for the console.log(one); line, and I can't figure out the reason. Where is the null value coming from, and how do I make it reference the <p id="one">Test</p> element?
EDIT: Full HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A tester</title>
<script src="index.js"></script>
</head>
<body>
<p id="one">One</p>
</body>
</html>
Probably you are accessing the element before the DOM is ready, Try with DOMContentLoaded:
document.addEventListener("DOMContentLoaded", function(event) {
var one = document.getElementById("one");
console.log(one);
})
<p id="one">Test</p>
It is working fine :)
var one = document.getElementById("one");
console.log(one);
<p id="one">Test</p>
It works fine.
<html lang="en">
<head>
<meta charset="utf-8">
<title>A tester</title>
<script src="index.js"></script>
<script>
function getOne()
{
var one = document.getElementById("one");
console.log(one);
}
</script>
</head>
<body onload="getOne()">
<p id="one">One</p>
</body>
</html>
This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
How to fix '$' was used before it was defined in both jslint and jshint using coding?
(2 answers)
Closed 8 years ago.
This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:
"$ was used before defined".
I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.
I referenced the HTML file to the js file like this
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
and this is my script
$(document).ready(function () {
"use strict";
$('div').mouseenter(function () {
$(this).animate({
height: '+=10px'
});
});
});
Reference the JQuery library in your page, like this
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Include this tag above the script tag of your js file
Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.
You should organize your HTML DOM like that :
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</body>
1.You should call Jquery library before calling your project JS file's.
The problem here is that you are using jQuery without actually including that library of code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.
NOTE: It is best practice to include your scripts just before your closing body tags.
Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).