How to insert js in html - javascript

test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is test Page for Learn JS</title>
<script type="text/javascript" src="/learn/test.js"></script>
</head>
<body>
<input type="button" value="Time" onclick="daytime()">
<p id="now"></p>
</body>
</html>
This is test.js
function daytime() {
document.getElementById("now").innerHTML=Date();
}
why click button,is nothing to do.
but insert js code to html,it's working

maybe you can check your js and html folder location.
can try to put your js and html in a same folder, and update your script src to "./test.js"

You must use the script tag and pass the address of your "test.js" file to the src attribute. Assuming your test.js is in the same directory as your test.html file, you can use this to link them up.
<script src = "./test.js"></script>
Place the script tag just before the closing of body tag, this helps in loading the body content first and then the JavaScript, making the user experience better.

looks like the issue is how you include the script file.
src="/learn/test.js"
If the folder "learn" is in the same folder as the HTML file, try removing the "/"
src="learn/test.js"

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

How to make an external js file write to the html <script> tags? Via plain JS or jQuery

I'm trying to write a function in an external javascript file linked to the index.html, which when called writes; for example between the <script></script> tags in the index.html file on line 18. Is it possible to do this with plain Javascript or jQuery? If so, how could this be done?
EDIT: I want to only have one script tag in my index.html.
function writeToScriptTags() {
// this function should write alert("Hello") to the <script></script> tags in the index.html file.
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" charset="utf-8"></script>
<title>CodeDragon</title>
<link rel="stylesheet" href="/css/master.css">
</head>
<body>
<div id="Dragon"></div>
<input type="text" name="_input" value="" id="_input">
<script src="script.js" charset="utf-8"></script>
<script>
// Javascript file should write alert("Hello") here
</script>
</body>
</html>
If the script tag already exists then you can set it's text/textContent/innerText value to whatever code you want to execute. But the script would need to have been empty beforehand, ie no text not even whitespace, otherwise it would not run.
//use an appropriate css selector to find the correct script
//this just selects the first script it finds
var s = document.querySelector('script');
s.text = 'alert("Here")';
It would probably be better to just create a new script element and add the code to that as then you would not need to worry about wither or not the script tag had already previously been used.
var s = document.createElement('script');
document.head.appendChild(s);
s.text = 'alert("Here")';
And of course if the script is set with a src attribute setting the text of the script will not run any code as it is ignored for externally linked script elements.
You can try this way
Say this is you external.js file
function writeToScriptTags() {
// this function should write alert("Hello") to the <script></script> tags in the index.html file.
}
You can call functions of external.js file between the tags in the index.html file this way.
$.getscript("path/to/jsFile", function() {
writeToScriptTags()
});
Hope you can get an idea.
jQuery solution:
$('script').html('alert(\'Hello\')');
Plain JS solution:
document.querySelector('html').innerHTML = alert('Hello');
Don't add it to the code as a text, beceause it'd be rendered as a plain text and it wouldn't have any functionality.

Adding an external JavaScript file in NetBeans and linking with the index file

I have added a JavaScript file into my existing project and referred that in the HTML file. The file structure is shown as its in the attachment. After I run the program, the output does not display what it is supposed to be.
Is there anything wrong with my file tree (how I am adding file into the project) or I am not referring the script the in the correct way?
Here is how my program looks like:
index:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="newjavascript.js" type="text/javascript"></script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
.JS:
document.getElementById("demo").innerHTML = 7+9;
It seems to be everything is ok with your project structure and refererring to js file inside index.html. However, the demo paragraph does not display what you want because it can be just not loaded in the time when your newjavascript.js is executed. I think you can try to modify it in the following way:
window.onload = function () {
document.getElementById("demo").innerHTML = 7+9;
};
Using onload function of window object you wait until a page (including demo paragraph) is loaded - and after it change its content.

how to load a js file and execute it on CEF

I use CEF(chromium ebedded Framework) load a html page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="phantom-limb.js" type="text/javascript"></script>
</body>
</html>
and it works ok. now, I modify the page as follow:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
and after cef loaded it, I use cef's ExecuteJavaScript method to execute the same phantom-limb.js, but nothing appear.
how can I load the js file and execute, or, the js file has some limit?
thx:)
As you can see at the end of the source code of you JS file, the startOnLoad config parameter is set to true by default.
In this way a listener to the DOMContentLoaded is added, which is never called because your page is already loaded.
So, you just have to append the line start(); to your source code, then call your ExecuteJavaScript and it will work even after the page is loaded.

How can I get the content of a loaded file (with script or link)

I was wondering, how I get the content of a loaded script, stylesheet, ... bye an accessing an id set on the element.
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<script id="test" src="test.txt" type="text/isis-template"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$('#test').GET_CONTENT_OF_LOADED_FILE
});
</script>
</head>
<body>
</body>
</html>
Background: I want to load HTML templates (e.g. for mustach, knockout), but don't want to write them into the page, I'd rather have them in a seperate file. Now I saw that I can load any file with the script or link tag, so I was testing if I can load them like this....
Any comments why this might be a bad idea or how it can be done better are appreciated.
Try using load()
$(function () {
$('#test').load('yourfolder/test.html', function(resp){
alert(resp);
});
});
If you have already load the contents in some html element
contents = $('#test').html();
So you want the content of text/isis-template file when document is ready?
You are lucky because this file doesn't fall for CORS but mine(the answer i was looking for and came here today) do.
Well just do ajax!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="../jquery-1.8.3.min.js"></script>
<!-- File contains "Hello world" -->
<script>
$(function () {
$.ajax({ url: "test.html"})
.done(function(cont) {
var GET_CONTENT_OF_LOADED_FILE=cont;
});
});
</script>
</head>
<body></body>
</html>
If you use debug tools and see the network activity, you will see that it does not load the external files (since it is not a text/javascript, and the browser does not know how to handle it)
(wrong test on my part, was testing local files)
So you only have a tag there with an id and an external resource in the src attribute. Treat it as just metadata.
You will have to manually load the resources
something like this
// load external template resources
$('script[type="text/isis-template"]').each(function(){
$(this).load(this.src);
});
For actual use you would need to make sure the templates are loaded before you try using them..

Categories

Resources