My JavaScript file isn't linking to my HTML file [duplicate] - javascript
This question already has answers here:
External JavaScript Not Running, does not write to document
(4 answers)
Do scripts in the document head always execute before DOMContentLoaded fires?
(2 answers)
How can an external Javascript file affect an HTML file's DOM?
(5 answers)
Closed 1 year ago.
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script src="./main.js"></script>
<title>Florida Plan - Financing and Planning</title>
</head>
</html>
Internal JS works fine and I wouldn't mind using it, but I want to start getting into the habit of using external JS files. I've tried linking it, and it doesn't seem to work. I gave it a small test with just one line of code... Also, it didn't correct itself after adding a semi-colon.
document.getElementById("rent").innerHTML = "56" // external
Internal worked
<script>
document.getElementById("rent").innerHTML = "56" // internal
</script>
It only seemed to work in the script tag inside the HTML document. I've also tried specifying full paths to the file, which is in the same directory, it doesn't seem to work. Screenshot of directory. If anyone could help, it'd be great!
Related
How to insert a page from an external module in Rails 5.2?
A colleague of mine developped an html/javascript/css reporting module, independant from current application, that we would like to be part of the aplication. To keep track of modules evolutions, we cloned his git repository into application's views folder, and declared a route to reach the page. This looks good, but the page does not fully work: the javascript console raises several http 404 - not found errors. The page does not find css and js resources, which are declared in the page: v4_test.html <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Reporting tool SIS - Test</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/dc.css"> <link rel="stylesheet" type="text/css" href="css/leaflet.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="js/downloadFile.js"></script> </head> <body> --- </body> </html> Rails searches these elements from the root of the site instead of relatively to the current page. I tried to express the path as href="./css/dc.css" but this changes nothing. Folder organisation: views |_governance |_monitoring_pages |_css |_data |_js v4_test.html route.rb get 'test', to: "/governance/monitoring_pages#v4_test" How can I update this page header section so that it finds relative resources?
Spring Boot Static content issue
Edit: I am using Intellij ultimate.
I attempted to look through similar questions but wasn't able to find an answer to help me.
I've gotten CSS to work with spring boot. However, Js still won't function.
I used this statement to get CSS to work.
application.properties
spring.web.resources.static-locations=classpath:/
and ive added webjar jquery to dependencies
forgive my code its a bit sloppy this is just test file
Html
<head>
<link th:href = "#{../static/css/main.css}" rel="stylesheet">
<script src='/webjars/jquery/3.0.0/jquery.js'></script>
<link type="javascript" href="/static/js/script.js">
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Of Day</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
I've used both HTML and thyme.
My Website is stuck on pre-loader loop (CSS broken)
Newbie here, and first time experiencing this issue. My website (www.kandomedia.co.za) works perfectly fine when i was developing it offline on my local machine as per attached image. Kando Media Website Local Machine But as soon as i upload it to my hosting account, its stuck on the preloader screen (if you visit www.kandomedia.co.za/new/ you can see this in action) I have done quite a bit of research on google to try resolve this issue, but still cannot fix it. If i take away the preloader completely, the website is not formatted correctly like it looks on my local machine. It seems the site is not loading the CSS files etc. I have checked, double checked and triple checked to make sure all the paths are correct, and that everything is where it is supposed to be. But still no luck. This is the structure in the head tag: <html lang="en-US" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ===============================================--> <!-- Document Title--> <!-- ===============================================--> <title>Kando Media (Pty) Ltd :: Website design, graphic design and website hosting services South Africa</title> <!-- ===============================================--> <!-- Favicons--> <!-- ===============================================--> <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png"> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico"> <link rel="manifest" href="assets/img/favicons/manifest.json"> <meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png"> <meta name="theme-color" content="#ffffff"> <!-- ===============================================--> <!-- Stylesheets--> <!-- ===============================================--> <link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="assets/lib/remodal/remodal.css" rel="stylesheet"> <link href="assets/lib/remodal/remodal-default-theme.css" rel="stylesheet"> <link href="assets/lib/owl.carousel/owl.carousel.css" rel="stylesheet"> <link href="assets/lib/lightbox2/css/lightbox.css" rel="stylesheet"> <link href="assets/lib/semantic-ui-accordion/accordion.min.css" rel="stylesheet"> <link href="assets/lib/semantic-ui-transition/transition.min.css" rel="stylesheet"> <link href="assets/css/theme.css" rel="stylesheet"> <link rel="stylesheet" href="assets/css/theme.css" type="text/css"> </head> Where am i going wrong here? I havent slept a whole day trying to figure this out. Even my friend who is an experienced developer cant figure it out (unless he doesnt want to help me haha) Please help, id really appreciate it.
it seems to be an error with some data on theme.js here is what i found on you site with f12 dev tools on crhome: can you check this out first? :)
After uploading my HTML/CSS/JS files to cPanel, I can view my website with the HTML/CSS working, but the JavaScript from my .js file is not working
Hello all: I am very new to web developing and I just got my HTML/CSS basic website to show up after getting files uploaded and organized in cPanel. However, when I added my .js file, it looks to me like it is not working. The .js and HTML files are in the same directory and I am linking it with the script tags properly but when I test it (console.log("hello world")), nothing is happening. Can anyone help me out here or point me in a direction to figuring this out?
<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">
<link href="https://fonts.googleapis.com/css?family=Arvo|Barlow+Condensed|Karla|Vollkorn&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/9394b48c69.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<script type ="text/javascript" src="home.js"></script>
<title>Timothy Peng</title>
</head>
Updated linked files not connecting with web page
In the head of my web page html document I have linked CSS and JavaScript files for the functionality and aesthetics of my page. They seemed to work fine, until I updated a JS file and it did not affect my page. Out of frustration, I eventually just added the script to the bottom of the page as part of script tags and forgot about it. However, when I wanted to update some CSS files, the same thing happened. I am using xampp and Sublime text 3 as text editor. I have triple checked the file locations and directories and they all match up. I cant think of any other issue that could cause this. Does anybody have any ideas? At the bottom I have attached an example of the head tags. <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="30" > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="../css/page_layout.css"> <link rel="stylesheet" type="text/css" href="../css/top_nav.css"> <link rel="stylesheet" type="text/css" href="../css/buttons.css"> <link rel="stylesheet" type="text/css" href="../css/tables.css"> <link rel="stylesheet" type="text/css" href="../css/side_nav.css"> <link rel="stylesheet" type="text/css" href="../css/modal.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="../java_script/top_nav.js"></script> </head>
There is a bug with Sublime Text 3, not any directory issues. Somehow it does not update and link files as it should. Once I close and reopen ST3, the changes show. I am considering using another text editor if this issue continues.