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.
Related
Doing some basic practice/testing for a project I'm working on and can't get my html file to access the functions written in the attached javascript file. I feel like there's something super basic that I'm missing but I can't put my finger on it.
I pulled the basic button from here: Creating an ON/OFF button with javascript
And I tried the solutions here: HTML file not pulling information from javascript file
My html:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
My js:
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
The function itself works when embedded in a script tag within <body> but not when pulled from the attached javascript file. What am I missing?
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
You need to add defer atrribute.
You should use <script> tag in body.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<input type="button" value="X" id="turn" onclick="turn();" />
<script src="app.js"></script>
</body>
</html>
For summary: Modern approach to old approach
You can use module which are defered by default <script type="module" src="/app.js"></script>
You can use defer to make sure your js is executed after page has load i.e <script src=app.js" defer></script>
You can put your <script> tag before </body> body tag closing
For more details, you can look at this excellent answer.
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 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>
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
Ive downloaded Notify.js'files and put them in root of webpage. im trying to test it but i didn't get anything when click on button
<html>
<head>
<title>Untitled</title>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$(".elem-demo").notify("Hello Box");">
</body>
</html>
Whats the problem?
This is your answer and working:
<html>
<head>
<title>Untitled</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$('.elem-demo').notify('Hello Box');"/>
<div class="elem-demo">a Box</div>
</body>
</html>
1-You forgot to include jquery to your file.
2-You should create an element that has a elem-demo class
3-Your javascript had a problem! You can't use double-quotation and it's child has double-quotation too.
here is your code example, and then my code:
onclick="$(".elem-demo").notify("Hello Box");" //Your code
onclick="$('.elem-demo').notify('Hello Box');" //My code