When trying to invoke a JavaScript function of a .js file from .html file the function doesn't being invoked.
Project hierarchy:
html (folder)
main.html
js (folder)
script.js
Example #1 - using .html - Works
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main page</title>
</head>
<body>
<label id="label1"></label>
<input id="text1" type="text"/>
<button onclick="document.getElementById('label1').innerHTML = document.getElementById('text1').value">Button</button>
</body>
</html>
Example #2 - using .html and .js - Doesn't work
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main page</title>
</head>
<body>
<label id="label1"></label>
<input id="text1" type="text"/>
<button onclick="outputInput()">Button</button>
<script src="/js/script.js"></script>
</body>
</html>
script.js
function outputInput(){
document.getElementById('label1').innerHTML = document.getElementById('text1').value;}
In your <script src="/js/script.js"></script>, you're using an absolute URL. Based on further testing, it appears that your "js" folder is not at the root of your website and so it is not found there. Using a relative URL src="../js/script.js" is more tolerant about where you put things.
Related
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 a simple structure to test clipboard.js but it's not working.
I used in a simple file because it was not working in the project too:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
</body>
</html>
you need to instantiate it by passing a DOM selector, HTML element, or
list of HTML elements.
new ClipboardJS('.btn');
https://clipboardjs.com/#setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
new ClipboardJS('.btn');
</script>
</body>
</html>
I am working on a java spring project and would like to add a static javascript file to an HTML page. here is what I currently have it seems to work for the css but not the js. the basic file structure is
i am trying to get static js from /static/js/pie-chart.js and put it into /templates/show/match.html here is what i currently have for the html.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- css is working -->
<link rel="stylesheet" href="../static/css/main.css" th:href="#{/css/main.css}">
</script>
</head>
<body>
<!-- the script does not seem to be linking to the page -->
<script src="../static/js/pie-chart.js" th:src="#{/js/pie-chart.js}">
<body>
</html>
Well, the static folder can be treat as the root path.So you don't have to add this '../static/' prefix in your href. You can try as following to see if it works.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!- Delete the relative path-->
<link rel="stylesheet" href="/css/main.css">
</script>
</head>
<body>
<!- Delete the relative path-->
<script src="/js/pie-chart.js">
<body>
</html>
Use this in order to link your Js file in HTML Page :--
<script src="js/pie-chart.js">
This image in my sample boot project. you can using th:href="#{/your/js}".
like this :
readingList.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Reading List</title>
<link rel="stylesheet" th:href="#{/css/style.css}" />
</head>
<body>
<label>Reading List!!</label>
</body>
</html>
How to style html entity using css and jquery. (ŵ) is showing bold more than other letter.
<!doctype html>
<html>
<head>
<title> My First Webpage</title>
<meta charset="utf-8" />
</head>
<body>
<div>
Glyndŵr's Way
</div>
</body>
The first step is to add your text into the div and adding a stylesheet for this div
div{
color:red;
}
<!doctype html>
<html>
<head>
<title> My First Webpage</title>
<meta charset="utf-8" />
</head>
<body>
<div>
my text
</div>
</body>
I use Atom. What I do is create a separate file for css only saving it as (whatever you want to save it as .css) ON THE SAME FOLDER and link it to my html document using the at the beginning of the html document.
I'm new to JavaScript and just want to put my JavaScript code in another file.
This is my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" scr = "testing.js"></script>//this contains the function I want to call
</head>
<body id="body">
<button type="button", onclick="showDate()">show the date</button>
</body>
</html>
This is the testing.js file:
function showDate() {
alert ("this works")
}
I'm assuming that I just make a beginner mistake because it seems really common but I can't figure it out.
you spelled the 'src' attribute incorrectly on your tag
you spelled it scr, it should be src
this:
<script type="text/javascript" scr = "testing.js"></script>
should be this:
<script type="text/javascript" src = "testing.js"></script>
change the button to
<button type="button" onclick="showDate()">show the date</button>
and change scr to src
EDIT: source that works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" src="testing.js">
</script>
</head>
<body id="body">
<button type="button" onclick="showDate();">show the date</button>
</body>
</html>
Quick use of html validator such as http://validator.w3.org/nu/ will uncover lots of problems in your code. Just copy paste and correct the errors.