I have been receiving the following error since I started learning AngularJS:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.5/$injector/modulerr?p0=ToDo&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.5%2Fangular.min.js%3A17%3A315)
In my efforts to debug this error, I started stripping down my HTML script by script until I was left with an empty HTML that only contained ng-app declaration and <script> to import the angular.min.js via CDN.
Please Help !!
Here's what my html looks like::
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
</html>
Made a silly mistake,
the <script> has to go within the <body> tags. Here is what solved the problem.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Obligatory</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
</html>
</body>
I guess I was more more dumb that I had anticipated :)
Related
why is document.getElementById() not working in VS Code?? I keep getting this error: "Uncaught ReferenceError ReferenceError: document is not defined". I'm new to VS Code but I'm assuming the reason It's not working is that I need to install some extension to make it work. The same code is working on Replit but not VS code. I installed JS(ES6) Snippets, Open-in browser, Live Preview and Live Server. It's very simple 2-line code just to experiment but it's not working. It's driving me crazy!
let head = document.getElementById('change')
head.innerText = 'hello'
I bet that you are not running this in an index.html file in the browser, so this is not VS Code problem, you are probably running this in a node console or something, there is no html or document in what you are trying to test and that is why you are getting this error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h1>HELLO</h1>
<hr />
<h2 id="change"></h2>
<script>
let head = document.getElementById('change')
head.innerText = "why isn't this working?";
</script>
</body>
</html>
Definitely has nothing to do with VS Code.
Make sure your html file is referencing your javascript file.
<!DOCTYPE html>
<html>
<body>
<h1>This is my HTML file</h1>
<script src="script.js"></script>
</body>
</html>
The script element should be in your html with the name of your js file
<script src="script.js"></script>
This not the vscode issue please check you are running the right file
I'm busy pumping out some web projects from the Odin Project. Anyway, I'd like to adhere to the software engineering process of taking small steps and testing them. Now, for instance, I'd like to see the output of document.querySelector("body"). It is my understanding that I should place the tag somewhere, I'm not too sure what the best place is. The StackOverflow posts on this topic are quite ambiguous. Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
</body>
<script type="text/javascript" src="createDOM.js"></script>
</html>
createDOM.js:
const body = document.querySelector("body");
console.log(body);
Console:
<body>
<script type="text/javascript" src="createDOM.js"></script>
</body>
Me:
$ ????????
It is the way webengine play with source. Most ( and almost all ) webengine put everything into body that can be ( i.e following the standard ) because body is taken as subroot for DOM structure
Wrapp your script inside the body tag, at the end.
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
<script type="text/javascript" src="createDOM.js"</script>
</body>
</html>
I have a problem using document.getElementbyId. It doesn't show "test" when I open the html file in my browser and I get an error: Uncaught ReferenceError: Invalid left-hand side in assignment. I have tried putting the script tag in various places, but it doesn't work.
document.getElementById("demo") = "test";
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script src="test.js"></script>
</body>
</html>
I would appreciate any kind of help! Thanks!
getElementById returns an element. If you need to set the text, you could set the innerText of that element, e.g:
document.getElementById("demo").innerText = "test";
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script src="test.js"></script>
</body>
</html>
You cannot directly assign the string to change the content of the html element.
Refer below the code:--
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo">Hello</p>
<script>
document.getElementById("demo").innerHTML = "Hey";
</script>
</body>
</html>
such as just:
<!doctype html>
<html>
<head>
<title>Example of confirm()</title>
<script>
if (confirm("Want to go to Disneyland?"))
document.location.href
=“http://park.hongkongdisneyland.com”;
</script> //says this wont work, because of the /<
</head> //says this wont work, because of the /<
</html> //says this wont work, because of the /<
VM43:1 Uncaught SyntaxError: Unexpected token <
As cHao stated, you got to make sure you using the right "
<!doctype html>
<html>
<head>
<title>Example of confirm()</title>
<script>
if (confirm("Want to go to Disneyland?"))
document.location.href
="http://park.hongkongdisneyland.com"; //This was changed
</script>
</head>
</html>
I am having a problem with Angular JS receiving an error
Uncaught Error: [$injector:modulerr]....
this my javascript and html code..
what's wrong there?
(function(){
var app = angular.module('store', []);
app.controller('tes', function($scope) {
});
})();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<script type="text/javascript" src="../angular.min.js"></script>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
</body>
</html>
Well you have your script tag hanging outside head tag and before body tag.
Fixed it as follows;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
working link : http://plnkr.co/edit/tLt22vN1mkGDWTNabq3J?p=preview
I just tested your code by copy paste in a new project and added correct reference to the angular js file and it worked fine for me. Do you have any other module which is trying to load? click on the error link and you might be able to figure out the issue. I think you are missing the correct reference to the angular.min.js file
Most likely explanations
You haven't loaded the file where you define the module 'store', the first code block, in the html
There's an error in your module code so that angular doesn't interpret it correctly
Also fix the ng-app attribute:
<body ng-app="store">
Please remove (function(){ from top and remove })(); from bottom.
it's not a jquery, so please remove it.
And please check ../angular.min.js is on proper place or not.