I'm new to CoffeeScript and JS. I'm trying to create an alert when a div is clicked, but I'm not sure why my code isn't working. All of these files are in the same directory.
first.coffee
$('#button').on 'click', -> alert 'Hello World!'
I've tried this with and without the hash before button.
And after compiling this:
first.js
// Generated by CoffeeScript 1.12.4
(function() {
$('#button').on('click', function() {
return alert('Hello World!');
});
}).call(this);
And the HTML looks like this. I've tried moving the script to the header too but I don't think that makes a difference.
first.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CoffeeScript</title>
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
<div id='button'></div>
<script src='first.js'></script>
</body>
</html>
And the styling for the div:
first.css
#button {
width: 100px;
height: 100px;
background-color: black;
}
You need to add a reference to the jQuery javascript libraries before your script
<body>
<div id='button'></div>
<script src='/path/to/jquery-3.1.1.min.js'></script>
<script src='first.js'></script>
</body>
You will need to download jQuery to your system and provide the correct path.
Related
Please be patient if this question resembles several similar ones, but I do not seem to adapt the answers to my problem, for example Accessing Files with p5.js in Visual Studio Code.
The following sketch.js example works in https://editor.p5js.org/:
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}
I would like to use Visual Studio Code to go ahead with p5.js.
The following index.html is given by the tutors of the example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../libraries/p5/p5.min.js" type="text/javascript"></script>
<script src="../../libraries/generative-design-library/generative-design-library.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<link href="../../styles/main.css" rel="stylesheet" type="text/css">
<!-- help tooltip start -->
<script src="../../libraries/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../../libraries/tooltipster/tooltipster.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster.bundle.css" />
<link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster-sideTip-noir.min.css" />
<script src="../../libraries/help-tooltip.js" type="text/javascript"></script>
<!-- help tooltip end -->
</head>
<body>
<span id="help" data-tooltip-content="#help-content">?</span>
</body>
</html>
The relative paths are fine with respect to the folder structure (downloaded from https://github.com/generative-design/Code-Package-p5.js/releases/tag/v1.3.2):
Code-Package-p5.js-1.3.2
libraries
01_P
P_1_0_01
index.html
sketch.js
I tried both extensions p5 Server and p5.vscode which result in the same behaviour: Only the question mark is shown, not, however, the canvas created in sketch.js. It seems that sketch.js is simply not found. What is the reason for this? What needs to be done in order to use p5.js in VS Code?
Do you have sketch.js in the same folder as your html file?
- main
- libraries
- p5 and stuff
- page0
- maybe assets
- code
- index.html
- sketch.js ???
You could also replace
<script src="sketch.js" type="text/javascript"></script>
with:
<script>
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}
</script>
And also you might be able to put the sketch.js in <body>, I don't think that really helps, but it might, dunno.
To get p5.js working on your local computer:
You should have 1,(2,3)+ files:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
You can also store the p5.js library on your own computer, It's just a JavaScript file, but I copied this from editor.p5js.org.
sketch.js:
function setup(){
// use p5.js stuff here
}
// use everything else here it's all a starting point!
style.css:
body {
background-color: #111;
}
button {
width: 100vw;
height: 2px;
}
This is completely optional, just like .js file, you can use <style> </style> instead.
After you have all these files (currently) in a single folder. Just open the index.html file.
I'm learning to use event listeners, I wanted to log pressing the "Start" button to the console to make sure the button works but I'm not getting any results when I test the .html file in devtools.
I've verified the index.js name referenced in the .html file is the same
I've tried the source code in the header
I've added the src=index.js jQuery library through Google to the bottom before </body>
I've copied the code to repl.it to try a different environment
JAVASCRIPT:
function startQuiz() {
$('#startButton').click(function(event){
console.log("Keep Going");
});
}
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Herbal Medicine: Adaptogens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="questions" href="store.html">
</head>
<body>
<div class="container">
<p>Intro to Herbal Adaptogens explaining what they are</p>
<button id="startButton">Start</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I expect the to see "Keep Going" in the console when I press "start" but instead nothing happens at all.
You have the JQuery click() function inside the startQuiz() function. So it won't work unless the outer function (startQuiz()) is run first. You should put it inside a ready function so that it loads once the page is 'ready'.
Change your javascript to look like this:
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
});
});
No need to go with jQuery , you can just use js events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log Window</title>
</head>
<body>
<script>
function logMe() {console.log('clicked');}
</script>
<button onclick="logMe()">logMe</button>
</body>
</html>
You should put it inside a Jquery click function. This way it will fire when the document loads.
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
}
});
I am new to this site and to jQuery and I have a problem that is probably very simple but I cannot for the life of me solve it. I am running "index.html" from my computer and jquery.js (downloaded from jquery's website) is absolutely in the same folder and it seems to be referenced correctly in my code.
It was only meant to be a simple thing of clicking on a div and it would fade out. I really don't understand why it doesn't work.
Sorry if this is a really basic question, I have looked around the site and searched a lot.
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="/jquery.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</body>
</html>
style.css
div {
height: 300px;
width: 300px;
border: 2px solid black;
border-radius: 100%;
display: inline-block;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
script.js
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
http://jsfiddle.net/ou43epos/
Try changing
<script src="/jquery.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
to
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
The leading slash makes your browser look in the file system root. Without the slash, it'll load from the current (index.html) directory.
I just solved it! It was simple.. I put "/" before script and jquery. I didn't realise I could use the network tab to see what files were loaded.
Such a basic error but it drove me crazy for a long time! Such is life :).
Thanks all (especially #Juhana)
Using src="/jquery.js" to load your scripts results in your browser trying to load file:///C:/jquery.js. Change it to src="jquery.js".
As Mark Byers said in this answer:
If your browser is currently pointing at http://foo/bar/baz.html then:
• <a href="reset/index.html"> would link to http://foo/bar/reset/index.html.
• <a href="/reset/index.html"> would link to http://foo/reset/index.html.
I'm trying to test dojo Calendar. I was having problems so I made a test page and copied the example code from the dojo site. It manifested the same problem: the text is displayed with very large vertical gaps in it and little other formatting. I can't get the test on their page to work either so I don't know what it's supposed to look like.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dojo/ready", "dojox/calendar/Calendar"],
function(parser, ready, Calendar){
ready(function(){
calendar = new Calendar({
dateInterval: "day",
style: "position:relative;width:600px;height:600px"
}, "someId");
}
)}
);
</script>
</head>
<body class="claro">
<style type="text/css">
.dojoxCalendar{ font-size: 12px; font-family:Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; }
</style>
<div id="someId" >
</div>
</body>
</html>
The only change I made was to use the libraries at ajax.googleapis.com. Should I also include dojox? I thought it came with dojo.js.
You missed including style file, add this into the head and it will be OK:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/calendar/themes/claro/Calendar.css" />
or see this jsfiddle
Hi all I'm trying to use dijit from the dojo library and trying to use the Calendar component. I followed the code as it is in the online documentation but it just doesn't seem to work. Below is the code that I'm using:
<html>
<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.claro table.dijitCalendarContainer { margin: 25px auto; } #formatted
{ text-align: center; }
</style>
</head>
<body class=" claro ">
<div dojoType="dijit._Calendar" onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})">
</div>
<p id="formatted">
</p>
</body>
<script type="text/javascript" src="js/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // loads the optimized dijit layer
dojo.require("dijit._Calendar");
</script>
</html>
Using firebug it shows the following error:
Could not load 'dijit._Calendar'; last
tried '../dijit/_Calendar.js'
Please can anyone help me on this. I really want to make this work.
Thanks in advance.
Your tree appears to have been changed, or at least you relocated the copy of dojo.js from the standard distribution. You should include dojo as "dojo/dojo.js" It will then use that reference to find relative urls in the tree, like ../dijit/_Calendar.js