When I make a JS file and run it in Terminal it successfully runs .
code:
function add(x,y){
var sum = x+y;
console.log(sum);
}
add(15,5);
this code gives me correct answer, but when I create an HTML file and link it with the same Javascript file and trying to run it in terminal a pop-up massage says "code language not supported or defined"
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="indaxi.js"></script>
</head>
<body>
</body>
</html>
so , why is that ..?
You will need to make sure that your file is referenced correctly. Here it is expected to be in the same folder as the HTML file that you have. As about the language, you can specify it as
<script type="text/javascript" src="indaxi.js"></script>
Related
I am learning JavaScript. I create a file in same folder and linked it with html. The problem is when I write alert("Hello World") so it shows message in browser but when I am trying
document.getElementById("p1").innerHtml = "Hello world"
it does not change the content of my HTML element.
The HTML DOM property is innerHTML, not innerHtml:
document.getElementById("p1").innerHTML = "Hello world";
<div id="p1"></div>
Now the JavaScript code is executed before your browser loaded the DOM, so it won't work.
Move the <script src="main.js"></script> just above </body> in your HTML file. This way the DOM gets loaded before the JavaScript code.
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1 id="p1">hi</H1>
<script src="main.js"></script>
</body>
</html>
I have a very simple directory structure with an index.html file and a main.js file at the same level and no other files/folders. But I'm unable to link this js file in my index.html.
I have posted the contents of both files below, and the expected behaviour is to have a simple alert pop-up.
Here is my HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" scr="main.js"></script>
<title>External JS Issue</title>
</head>
<body>
Some Content Here.
</body>
</html>
Here is my JS File:
alert("If you can read this, it worked!");
However, if I include this JS line of code and put it directly inside my index.html, it works fine.
Here are the screenshots:
index.html:
main.js:
Browser Screenshot with External JS(NOT Working):
index.html with inline JS:
Browser Screenshot with Inline JS(Working):
You have a typo, the attribute of the <script> tag should be src, not scr.
I have experience with Java and Python and am following along with this tutorial online (https://www.youtube.com/watch?v=W6NZfCO5SIk&t=579s) to learn Javascript. Despite copying and pasting his code (where I have a javascript file called "test.js" and a html file called "test.html", I am unable to have the "Hello world" text displaying in the browser page when it opens. (The title of the page displays correctly, but the "Hello world" text does not display in the page and there is only a blank page).
test.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<title>Today's date</title>
</head>
<body>
<script src = "test.js">
</script>
</body>
test.js:
console.log("Hello world")
just press F12 to open your console
use alert display it in browser
oh i get you i guess
try this <h1></h1>
<body>
<h1>Hello World</h1>
<script src = "test.js">
</script>
</body>
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
i try to learn angular js.
i try a simple code in the html like this
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="bootstrap.min.css" >
</head>
<body>
<input type="text" ng-model="name">
<div>hello{(name)}</div>
<!-- jQuery -->
<script src="https://cdnjs.com/libraries/angular.js/"></script>
</body>
</html>
the result when i run it on web browser is an error. it didnt work
the error on console is like this
Uncaught ReferenceError: System is not defined on line 2
how come i get error like this?
You cannot include all the https://cdnjs.com/libraries/angular.js/ page, you need to choose which script you want to include, something like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Also, it is {{name}} (two curly braces), not {(name)}
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
</head>
<body>
<input type="text" ng-model="name">
<div>hello {{name}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</body>
</html>
This is pointing to the AngularJS CDN page:
<script src="https://cdnjs.com/libraries/angular.js/"></script>
You should select a version. For example Minified AngularJS version 1.5.8:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
Notice that you should exclude the https.
Also check that to print out a variable in AngularJS you should use {{ name }} instead of {(name)}.
There are at least two points that need to be highlighted here.
Your import. The other answers are describing perfectly why it does not work. Fix it.
Angular itself. Angular works with applications and controllers (for its simplest part). What you need to do is to make a file which will contain your controller. For example, create a file called myapp.js and import it into your web page:
<script src="path/to/myapp.js"></script>
Then, once you initialized your application (var myApp = angular.module('myApp',[]); will do the trick perfectly) and controller (check the AngularJS documentation about it), you'll be able to intialize your data with your scope:
$scope.name = 'John';
Call your application in your HTML page:
<html ng-app="myApp">
And you'll be able to see the magic working there:
hello {{ name }} // and not {( name )}
Your web browser should actually display:
hello John