I can't seem to get my JavaScript to do anything - javascript

How do I link it to an external .js file I've made to put all of my JavaScript in?
My HTML code looks like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Sweet Dreams Bakery</title>
<link rel="stylesheet" href="home.css">
<script src="jquery-3.2.1.min.js"></script>
I've made the .js files for each page and they are in the same folder as the html files, however when I try to link them together with <script src="home.js"</script> underneath the library path, nothing works. I'm wanting to start with a simple image change on hover with my logo.
I've also tried the inline trick within my HTML for the logo with this code:
<img src="1" onmouseover="this.src='2'" onmouseout="this.src='1'">
I've tried linking to the "home.js" file I created and adding this into that file:
$(function(){
$("#swaplogo").on({
mouseenter: function(){
$(this).attr('src','Logo1.png');
},
mouseleave: function(){
$(this).attr('src','Logo.png');
}
});
});
I thought this was supposed to call out to the id that I gave the image and all of my images are together and working fine within the site. The id code for my logo is this:
<img id="swaplogo" alt="sweet dreams bakery logo" src="Logo.png" >
How would I go about linking an external JavaScript file (like my CSS files) to the html page in order to get the interactions to function correctly?
How to I link to my JavaScript to begin with? and then how do I make my image change on hover/mouseover?

Related

How to insert js in html

test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is test Page for Learn JS</title>
<script type="text/javascript" src="/learn/test.js"></script>
</head>
<body>
<input type="button" value="Time" onclick="daytime()">
<p id="now"></p>
</body>
</html>
This is test.js
function daytime() {
document.getElementById("now").innerHTML=Date();
}
why click button,is nothing to do.
but insert js code to html,it's working

maybe you can check your js and html folder location.
can try to put your js and html in a same folder, and update your script src to "./test.js"

You must use the script tag and pass the address of your "test.js" file to the src attribute. Assuming your test.js is in the same directory as your test.html file, you can use this to link them up.
<script src = "./test.js"></script>
Place the script tag just before the closing of body tag, this helps in loading the body content first and then the JavaScript, making the user experience better.

looks like the issue is how you include the script file.
src="/learn/test.js"
If the folder "learn" is in the same folder as the HTML file, try removing the "/"
src="learn/test.js"

Slide HTML page in onload (not divs/sections)

I have built a website and now wanting to add a slide on load feature on a few content pages, not the entire site.
I have tried using Barba.js transition but it's not working. I'm not sure if it's conflicted with the jQuery scripts I already have on my website or not.
Is there an easier way for me to create this form of sliding transition between pages not sections or divs just the html pages (index.html > about-us.html and so on...)?

<!DOCTYPE html>
<html>
<body>
<img src="ADD YOUR IMAGE" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html>
Try with this example and If you need for this all the pages just add this to the all pages too.

My Javascript file and jQuery aren't linking to my html file (everything is in the same folder and there are no typos)

I have just started coding and I have encountered a problem that seems very obvious. I wrote an HTML code in an HTML file and a CSS code in a CSS file. I have placed both in the same project folder.
To animate my website, I decided to write a Javascript code in a .js file using jQuery. I downloaded the latest version of jQuery into that same folder as all my other files of that project.
The CSS linked just fine, but not the Javascript. (I needed some text in Russian, so I followed the instructions from an answer in this forum). I am using Atom.
Heres my code (the file is long, so I won't include the full contents, just the javascript element... I literally made one to test it out but nothing seems to work) :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="out"><p>Test</p>
</div>
</body>
</html>
and here is what i wrote on main.js to see if it works :
$(document).ready(function() => {
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
So as you can see I am trying to make this part hide when the mouse goes over it. I also tried with 'click' and without the event. I didn't type anything else in main.js... was there supposed to be something that notifies it what document this goes into?
Furthermore, in the HTML, I also tried to specify the type (although not necessary). It also didn't work.
I don't know if I made typos or anything... I suspect that it may be because I put them all in the same project file. The project file in sitting on my desktop. Could that be the cause of the problem?
EDIT
I have changed my main.js file to :
$(document).ready(() => {
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
But it still doesn't work...

remove => from $(document).ready(function() => { and it will work (either it is in separate js file or added in HTML page itself)
Working snippet:-
$(document).ready(function(){
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--used live jquery library to make it working -->
</head>
<body>
<div class="out"><p>Test</p>
</div>
</body>
</html>
Note:- You can do like this also
$(document).ready(()=>{
$('.out').on('mouseover', ()=>{
$('.out').hide();
});
});
Running Output:- https://jsfiddle.net/npthjwu1/
A bit more cleaner approach:-
$(document).ready(function(){
$('.out').on('mouseover',function(){
$('.out').hide();
});
});

remove => from $(document).ready(function()

I think the problem comes with the anonymous function syntax that you are passing in as jQuery event handlers. You are trying to use both the old school JavaScript lamba and the new ES lamba syntax.
Try removing the old school JavaScript anonymous function syntax function(){}, and use the new ES style () => {} (since it is the latest, which is supported by modern browsers) as follows...
$(document).ready(() => {
$('.out').on('mouseover', () => {
$('.out').hide();
});
});

Convert .CSV to HTML Table

I want to convert a .csv file to a HTML Table in jQuery. To accomplish that, I'm using a jQuery Plugin called CSVToTable.
The way I used it in my code is as follow:
I called the .CSVToTable('path/to/file.csv') on my <div id="ItemTable"></div>:
$("#ItemTable").CSVToTable('ItemDatabase.csv', {
loadingImage: 'img/loading.gif',
startLine: 0
});
Everything seemed to work, as well as the loading.gif (which was included in the download).
My first try was running it on the ItemDatabase.csv, which is a .csv that contains approx. 350 lines. It kept loading and loading, and after 15 minutes, I tried it with a smaller file that contains 5 lines. It made no difference.
I looked at the source of their website with a demo, which worked fine, replaced the code, but made no difference.
If somebody could tell me what I'm doing wrong, that would be very helpful.
Note: I checked the file paths, and everything is initialized correctly
EDIT: For #sakir, the first 4 lines of my .csv file:
Name,Tier,Kind,Lvl,mDam,xDam,HR,MR,SD,LS,MS,XB,LB
Depressing Bow,Depressing,Bow,1,0,0,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Oak Wood Bow,Basic,Bow,1,4,6,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Birch Wood Bow,Basic,Bow,6,6,10,NONE,NONE,NONE,NONE,NONE,NONE,NONE

You can not use file from the local-file system. Please copy your file on the web-server and provide the url to that file in the .CSVToTable(url_file).

Try this way mate.But be sure to load required javascript and path to csv file.Inform me if it works for.Best of luck
csv file structure(test.csv)
Name,Tier,Kind,Lvl,mDam,xDam,HR,MR,SD,LS,MS,XB,LB
Depressing Bow,Depressing,Bow,1,0,0,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Oak Wood Bow,Basic,Bow,1,4,6,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Birch Wood Bow,Basic,Bow,6,6,10,NONE,NONE,NONE,NONE,NONE,NONE,NONE
code to convert csv 2 table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery CSVToTable</title>
<link rel="stylesheet" href="css/csvtable.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
</head>
<body>
CSV To Table:<br>
<div id="CSVTable">
</div>
<script type="text/javascript">
$(function() {
$('#CSVTable').CSVToTable('test.csv');
});
</script>
</body>
</html>

jQuery Load() not loading within div

I am trying to use jQuery to open an href inside a div, rather than simply linking to the new page. I have viewed a number of tutorials but the load() function does not seem to be working for me.
Please take a look at my code and let me know what piece of puzzle is missing.
Here is my HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery</title>
</head>
<body>
<!-- nav links to open in div#content area -->
<a class="menu_top" href="pages/home.php">Home</a> | <a class="menu_top" href="pages/about.php">About</a> | <a class="menu_top" href="pages/contact.php">Contact</a>
<!-- div for links to open in -->
<div id="content-area"></div>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
And my jQuery Javascript:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content_area').load(href);
//return false;
});
I added alert to make sure the URL was being retrieved, and it is, then it would completely load then new page. So I added "return false" and it did nothing after the alert suggesting that the load() was not working.
Initially was running this through WAMP so I tried running the page directly from the folder and the browser tried to download the linked pages instead of opening them. I also tried uploading to a remote web site and got the same result as on WAMP.

Try:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content-area').load(href);
//return false;
});
Because your div is called #content-area, not #content_area.

Categories

Resources