Here´s my html code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/Users/EdvinHedblom/Library/MobileDocuments/com~apple~CloudDocs/javascriptfile.js"></script>
</head>
<body>
The problem is that it doesn't take the functions from path. what am i doing wrong?
Make sure your index.html and js file folder same disk.
2.and just remove / in src at the beginning.
<script type="text/javascript" src="Users/EdvinHedblom/Library/MobileDocuments
/com~apple~CloudDocs/javascriptfile.js">
</script>
or just save your javascript.js file in folder name called "js"
and link your js file this,
<script type="text/javascript" src="js/avascript.js"></script>
First check whether that js file exists in the given path , if so
try to use like this
src="Users/EdvinHedblom/Library/MobileDocuments/com~apple~CloudDocs/javascriptfile.js"
If you load a file from the filesystem, then the prefix file:// should be used.
If an absolute path is used, don't forget the additional slash representing the root of the filesystem (in total three slashes).
In your case the HTML should then look like:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="file:///Users/EdvinHedblom/Library/MobileDocuments/com~apple~CloudDocs/javascriptfile.js"></script>
</head>
<body>
</body>
</html>
Related
I'm developing an extension for Microsoft Edge and have learned from the docs here https://learn.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension#writing-a-more-complex-extension that I can use Javascript for data manipulation.
For some reason though, when I try to modify a DOM element like this:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script type='text/javascript'>
document.getElementsByTagName('P')[0].innerHTML = 'something';
</script>
</body>
</html>
I get the desired result in any HTML / JAVASCRIPT interpreter but when I try to test it out in the extension the DOM manipulation isn't working. The p element isn't populated with 'something'. The manifest.json file is included in the extension folder I'm just not including it here as it's not relevant to the question.
How should I go about this ?
Update:
window.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='window.css'>
</head>
<body>
<div><p></p></div>
<script src="window.js"></script>
</body>
</html>
window.js:
window.onload() {
document.getElementsByTagName('P')[0].innerHTML = 'hakuna matata';
};
You should import the JavaScript function using <script> tag like below:
In myfunction.js file of js folder:
document.getElementsByTagName('p')[0].innerHTML = 'something';
In html file:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script src="js/myfunction.js"></script>
</body>
</html>
I tested it in Edge extension: If we use the JavaScript function directly in the html page then it doesn't work. If we use a link to the js file then it works.
I'm working on a project, and I didn't understand why a call to external script doesn't work.
Then I just did a extremely simple page html which includes a script alert, as you can see below... Can you tell me what's the problem ? I believe the problem is not the code, but what else can it be?
My browser is a recent Chrome, and my OS is Ubuntu.
My HTML file is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
<script type="text/javascript">
alert('Hey');
</script>
Paths starting with / are absolute paths. If the script and the HTML page are in the same directory, the script's path is simply "script.js":
<script type="text/javascript" src="script.js"></script>
<!-- Here --------------------------^ -->
If the file is in the same folder remove the "/" from script.js
<script type="text/javascript" src="script.js"></script>
Also if the js file has the script tags remove them.
If you want the alert when the doc is ready, consider doing something like:
document.addEventListener("DOMContentLoaded", function(event) {
alert('Hey')
});
I think that the script in the file dosen't need this script tag
<script type="text/javascript">
alert('Hey');
</script>
you can make like this
alert('hey');
just that try out and check if the file path in html to the js file is the right one.
Hi you don't need the script tags in the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
alert('Hey');
I have solve this problem by using Visual Studio. Just open the html file in VS and then run this file from here. It will connect your js file to html.
I have a fairly simple HTML file:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>deploy.rb</title>
<script src="test.js" type="text/javascript"></script>
<script src="OtherScript.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
body
</body>
</html>
test.js looks like this:
window.onload = function () { alert("It's loaded!") }
Can someone tell me why I don't get an alert when the page loads? (and why none of the functions in OtherScript.js are executing)
The full contents of the html file can be found here, if it helps.
I'm an idiot. OtherScript.js also used window.onload. I consolidated both scripts into the same file, and now it works file.
you might check the directory structure. The code looks fine to me, so if I had to guess the .js files are not being found correctly. If they're in the same directory as the HTML file you might try appending ./ to the beginning of the filename.
I know by include <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script> in HTML file, I can write in jQuery in this file directly. However, I am not working on a single file, thus, too much js code in the html doesn't look good. Can there be some method to use jQuery in js file? So I can put some common function in a standalone js file.
You can put your code in your own js file :
$(function() {
// your own code using the DOM
});
and then include this file just after the jQuery one :
<script src="scripts/jquery-1.10.2.js"></script>
<script src="myownfile.js"></script>
create a folder with the name js and inside put your js file for example main.js
your js file should start like : main.js
$(document).ready(function(){
//code here
});
note that you can use $(document).load(function() too
In your index.html put this in the footer like this : index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
<!--============MAIN-CONTAINER============ -->
<section>
</section>
<!--============SIDEBAR=================== -->
<aside>
</aside>
<!--============FOOTER==================== -->
<footer>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
</body>
</html>
for the best performance.
alfernative
if you want to use it as
<script src="scripts/jquery-2.0.0.min.js"></script>
download this:
http://code.jquery.com/jquery-2.0.0.min.js
and put it into a new folder with the name scripts and replace
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
with
<script src="scripts/jquery-2.0.0.min.js"></script>
in your footer like this:
<footer>
<script src="scripts/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</footer>
Of course you can use an external .js file, just add the required scripts files and their references onto your page plus add the external .js reference along with them.
//references in mail file
<script src="../Scripts/jquery-1.7.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../Scripts/text.js" type="text/javascript"></script>
//External test.js file
$(document).ready(function () {
//your functions here
}); // Document Ready Closed
Just keep that tag for jquery and go ahead and make your own JS file with jquery code in it and include that too in the html page, It will work
There are many questions similar to this but none of them have been able to help me.
I am new to HTML and JS development. I have a simple HTML file that is trying to access a simple Javascript file.
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
document.write("In HTML")
</script>
<script type="text/javascript" src=./asdf.js></script>
</head>
<body>
<div id="map3d" style="height:400px;width:600px;border:1px solid red"></div>
</body>
The Javascript file is named asdf and exists in the same location as the HTML. I have tried the full file path, just the name "asdf.js" and several other options I can't recall.
My .js file reads thusly:
<script>
document.write("In JS")
</script>
The "In JS" doesn't appear. What am I doing wrong?
External scripts do not require <script> and </script>. Write external scripts as if you were writing in between the tags.
In your JS file remove the <script> and </script> tags. They are for using JavaScript embedded within HTML, not for external file.