there
I want to add my javascript file onto an html, but when I put
<script scr="check.js"></script>
The page won't recognise it. But if I add the jQuery file
<script scr="jquery-3.1.1.min"></script>
it recognises it.
Any ideas of why this happens and how to solve it?
<script src="check.js"></script>
You've got a typo...Just change "scr" to "src".
Related
This question is not a duplicate!
I have tried many methods, yet they havent worked. I cannot tell what i am doing wrong. I have the src in the top script tags and i used $(document).ready
Here is the code:
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<button id="button">Button</button>
<script>
$(document).ready(function() {
$("#button").click(function() {
alert("Test");
});
});
</script>
</html>
Does the file jquery-3.3.1.min.js exist in the same path as your html file?
If not, you need to download jQuery or link to a CDN instead of a local file.
Your "jquery-3.3.1.min.js" file may not present in your working path. Make sure you provided the correct path or else you can load jquery from CDN directly.
Or
Try moving the script inside 'head' tag.
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.
Iam using load() for loading external html file.
$("#header_section").load("header.html");
$("#sidemenu_section").load("side_menu.html");
Here, HTML file is loaded and css also loaded but script file is not loading in the page
<script src="js/utility.js"></script>
I tried to declare the above script file inside the head and inside the body. Both are not working.
Check your relative path to the utility.js file and make sure to load juery.js library before load utility.js file.
and finally try this,
<script type="text/javascript" src="${pageContext.request.contextPath}/js/utility.js"></script>
to load the utility.js file.
I think you forget to add jquery.min.js file. use below code.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/utility.js"></script>
</head>
jQuery may only execute your code with the type attribute set to "text/javascript", per this bug filed a long time ago:
http://bugs.jquery.com/ticket/3733
Try this ...
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
The jQuery code that adds HTML to the DOM always strips out <script> tags. It runs them and then throws them away.
An exception to that behavior is when you use "$.load()" with the hack that allows you to load a fragment of a page:
$.load("http://something.com/whatever #stuff_I_want", function() { ... });
In that case, the scripts are stripped and not evaluated/run.
First off, I'm new to JQuery, so sorry if this is something simple and I'm just missing it.
I'm attempting to use the jquery plugin called "tooltipsy" (http://tooltipsy.com/).
The end goal is for this look here: http://screencast.com/t/4AghhAI7dL
This is what currently happens: screencast[dot]com/t/mBAIm67lM6W1 (sorry, couldn't post more than two links)
Inside my code I've copied it nearly identically from the examples, but I can't seem to get it to work. This is running inside a twig template file for a WordPress website, but I don't believe that, that should affect it (of course I could be, and probably am wrong)?
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js">
$('.hastip').tooltipsy();
</script>
It links to the CSS file in the header information, and the link works just fine.
My issue is the "tooltip" itself does not appear and I can't figure out why?
Would appreciate any and all help, thanks!
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js"></script>
<script>
$(document).ready(function() {
$('.hastip').tooltipsy();
});
</script>
You can't have code inside a script src.