The below code has 3 buttons. While the first two buttons use draw.js, the 3rd button uses shapes.js. Both javascripts have an onclick event handler, so I cannot use both scripts at same time.
Is there a way I can dynamically replace javascript in button click? Like when I press add polygon or add line only draw.js works and when I press add doors shapes.js works?
I tried following: http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml but didn't understand anything and made a mess out of my code. Similarly, as you can guess by the code, I am drawing on canvas so I don't want to lose anything on my canvas that is already there when I change my script.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="shapes.js"></script>
<script type="text/javascript" src="draw.js"></script>
</head>
<body>
<div id="board">
<canvas id="canvas1" width="300" height="300" style="border: 1px solid black;"> </canvas>
<br />
<input type="button" value="Add polygon" class="draw" data-type="poly">
<input type="button" value="Add line" class="draw" data-type="line">
<input type="button" value="Add door" >
</div>
</body>
</html>
You can use RequireJS library for it( http://requirejs.org/ ). RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments.
Like this, you can add any JS by RequireJS:
<script data-main="shapes.js" src="js/require.js"></script>
you can use HeadJs library .
HeadJS is a JavaScript file and module loader, a small library for Responsive Design, Feature Detections & Resource Loading
HeadJs is great and useful, try it.
Need to quickly load a JS or CSS file
// Load up some JS
head.load("jQuery.js", function() {
// Call a function when done
console.log("Done loading jQuery");
});
// Load up some CSS
head.load("bootstrap.css");
Related
I try to upload and draw an image into a canvas.
I have the html code for button and canvas and js code for onchange event.
My code does not work and I do not have any errors to figure out what is going on.
The fix is by simply including your scripts at the end of the body before the closing tag </body>.
Your html code will appear like this:
<html>
<body>
<div id="buttonsDiv" >
<input type="file" accept="image/*" title="Upload Image" class="normal-button" id="uploadBtn"/>
</div>
<canvas id= "myImgCanvas" title="Drop an image here to upload" ></canvas>
<script src="myFileName.js"></script>
</body>
</html>
Note that you must pay attention when you should/ should not include your scripts in the <head> tag vs including it at the end of the </body> tag. You can check this post for the best practice.
I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})
The below Jquery does not run within my browser even though the syntax is correct( checked via online syntax checker) and the functions do run (tested with pure JS). Why is it that so?
I apologize in advance if the answer to this question is rather simple but after 15min of googling I could not arrive at an answer.
JAVASCRIPT:
document.getElementById('overlay').addEventListener('click', function( {
closeLightBox()
});
function closeLightBox() {
$("#overlay").fadeOut(1000);
}
function lightbox(x) {
}
HTML
<!DOCTYPE html>
<html>
<head>
<title> Lightbox </title>
<link rel="stylesheet" type="text/css" href="lightboxcss.css">
</head>
<body>
<div id = "overlay"> </div>
<img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">
<br><br><br><br>
<p> RANDOM TEXT STUFF </p><br><br>
<p> 328ueekfuuirgh40t43h8hohro8ht </p>
<script src="lightboxjs.js"> </script>
</body>
</html>
I assume that javascript code is located in your .js file "lightboxjs.js". Did you include the jQuery library anywhere?
If you don't, start by adding this line <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> before including your custom javascript file.
$(document).ready(function(){
//page is ready
$("#overlay").on("click",function(){
this.fadeOut(1000);
});
});
You cannot add an eventlistener if the dom isnt loaded. Also dont forget to include jquery before executing the upper script
...
Where are you calling the jquery lib? You need to load the jquery just above lightboxjs.js and may as well use jquery syntax to listen to the #overlay click event.
I'm new in Chrome packaged apps and have two questions (that actually solves one problem).
I'm trying to do a simple form to send some data to a remote server, using Ajax and POST. As I understand, I can't use inline javascript ( tags) and also, I can't use events on the HTML button element. So, I've no idea where to put my javascript and what to execute when the button is clicked. My forms is as simple as this:
<!DOCTYPE html>
<html>
<head>
<script>
function send(){
//do some ajax
}
</script>
</head>
<body>
<img id="headerImage" name="headerImage" src="logo_main.gif"/>
<div>
<form>
<table>
<tr>
<td>Send:</td>
<td><input type="text" size="32" id="send" name="send"/>
</tr>
<tr>
<td colspan="2"><button id="send">Send</button>
</tr>
</table>
</form>
</div>
</body>
</html>
So my two questions are: where do I put my javascript? and how do I execute a javascript function from my HTML button element?
Thanks a lot!
P.D. I've searched for complete documentation about this, but can't find it. I'll very thankfull if some one posts a link with the complete documentation.
Your question's title does not really correspond to your question (edit it, maybe?). Answering your questions as quoted:
So my two questions are: where do I put my javascript? and how do I
execute a javascript function from my HTML button element?
Both of those questions are answered in documentation on Content Security Policy, with an example. Your JavaScript code should go in a separate file that you include with a <script> tag, and you need to bind event listeners from within that code.
To make this a proper answer, here's how to do it in your case, with jQuery (for non-jQuery solution see docs mentioned). To use, add jQuery as "jquery.js" in your app's files.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="form.js"></script>
</head>
<body>
<!-- ... -->
<button id="send">Send</button>
<!-- ... -->
</body>
</html>
form.js:
function send(){
//do some ajax
}
// Use document ready to wait for DOM to be created
$(document).ready(function(){
$('#send').click(send); // Binds a listener for onclick event
});
I have a script tag like
<div id='CommentBox'></div>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
This javascript creates a comment box. (like facebook comment box)
But when users copy/paste same exact script tag more than once Chrome and IE9 does not request 2nd, 3rd file again, because it is cached. But actually people want to use comment box more than once in the same page. How can I break browser cache and force it to download as many as people pasted in their blog?
You're doing it wrong.
If you want two or more comment boxes just call the code twice. A script include is not like a function call.
Instead of Code that you write use this code:
Main HTML File:
<html>
<head>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
</head>
<body>
<div id="CommentBox"></div>
<script type="text/javascript">
Func1();
</script>
</body>
</html>
widget.js File:
function FUNC1(){
alert("Hello");
}