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
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'm not able to run a simple script in a web which I inject jQuery
So lets imagine an almost blank web:
<html>
<head>
<title>Demo</title>
</head>
<body>
</body>
</html>
Then I open DOM and insert this:
<html>
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
<button class="btn btn-danger btn-block" id="demo">Demo</button>
<script>
$(function(){
$(document).on('click','#demo',function(){
alert("Hello World!");
});
});
</script>
</body>
</html>
And thats not working :( only works if the web starts with all the code at first, but don't when injecting.
Is there a way to make it possible?
Thanks a lot and greetings :)
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
So I know this is a super noob question but after adding a script tag for a .js file,my title element stops working.
As an example :
<html>
<title>TEST</title>
<head>
<script type="text/javascript" src="datetime.js"></script>
</head>
<body onload="showDateTime()">
<p>
</p>
</body>
</script>
</html>
yet if I delete the "<script type="text/javascript" src="datetime.js"></script>" portion, the title element works again. ANy help would be appreciated. Thanks
Two problems:
The title tag must be placed inside the <head></head>
The <script> tag is incorrectly nested. It must be closed in the head
<html>
<head>
<title>TEST</title>
<script type="text/javascript" src="datetime.js"></script>
</head>
<body onload="showDateTime()">
<p id='datetime-container'>
</p>
</body>
</html>
The code above should work.
The title tag needs to be inside the head.
http://www.w3schools.com/html/html_head.asp
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.