DOM element doesn't display - javascript

I am new in Javascript and I am trying to test following code
<html>
<head>
<script src="jquery/jquery.min.js">
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input')[0].on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
but when i open this html file in browser the button doesn't display

Script tags require a closing tag, which you've omitted:
<script src="jquery/jquery.min.js"></script>
^ close
By leaving it open, the browser is treating everything after the script tag as the script content.
Also your $('input')[0] isn't right. That is getting the DOM element of the input, which has no jQuery wrapper and no .on() function. If you are trying to match just the first input then:
$('input').first().on('click',function(){

Problems
Script block must be closed which you missed.
Use $('input') instead of $('input')[0], When you use $('input')[0] you get DOM element which doesn't have click method.
Use
<html>
<head>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>

To avoid these kind of confusions, try to separate like below,
In HTML:
<html>
<head>
<script src="jquery/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<input type="button" value="Click button">
</body>
</html>
In main.js
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
For Demo

Adding the <!DOCTYPE html> is better when you continue developing.

Related

Javascript doesn't work in html file

I have html file:
<html>
<head>
<script type="text/javascript" src="new.js"></script>
</head>
<body>
<p id="contentBI" >you should click here! </p>
</body>
</html>
and javascript file:
function doAlert() {
alert("hi!");
}
function addevent () {
theBI=document.getElementById("contentBI");
theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);
Javascript doesn't run.
use window.addEventListener("load",addevent); instead of document.addEventListener("load",addevent);
DEMO
So you want a document ready like jquery, try this:
document.addEventListener("DOMContentloaded",addevent, false);
Demo here
Assuming this is all of your code, the first issue you should tackle is telling your page where your Javascript is at.
Try placing your script between <script> </script> tags within your HTML file.
</head>
<body>
<p id="contentBI" >you should click here! </p>
<script>
function addevent (){
theBI=document.getElementById("contentBI");
theBI.addEventListener("click",doAlert);
}
document.addEventListener("load",addevent);
</script>
</body>
</html
It still won't work, most likely. But it's a start.

Execute JS on page load without using jQuery

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?
For example...
<html>
<head>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999;
margin:20px;"></div>
</body>
</html>
If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?
I use:
<script type="text/javascript">
window.onload = function(){
//do stuff here
};
</script>
This way you don't have to use any onload tags in your html.
The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:
<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</body>
</html>
You can use a variety of methods to accomplish this.
The simplest, easiest method would be to simply add the script tag at the end of your body tag:
<html>
<head>
<title> Example </title>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script type="text/javascript">
// Do stuff here
</script>
</body>
</html>
The way jQuery does it is something similar to:
window.onload = function() {
// Do stuff here
}
I usually just do it the second way, just in case.
To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.
You can use onload in your body tag.
<head>
<script type="text/javascript">
function doSomething() {
//your code here
}
</script>
</head>
<body onload="doSomething()">

Jquery .Click Function is Not Working Properly

I'm working on a K-Mapping application for Electrical Engineering. However, I'm stuck on a single click function.
if(jQuery)
$(document).ready(function(){
$('a').click(function(){
alert("Evaluate Click Works");
var match = $(mintermIndexes).compare(ArrayOfEight);
if(match){
alert("All squares have been checked");
}
return false;
});
});
This is HTML,
<div id="body">
<input id="Clear" value="Clear Form" type="submit" />
<a id="Evaluate" href="#" >Evaluate</a>
</div>
I really could use some help, I did share the only code that I think there is a problem. Please share your thoughts on how to fix this issue. Thanks.
p.s : I tried almost every possible selector, but still nothing. There is no respond when i hit the link.
EDIT: Changing the referencing order in the head tag worked, i.e i changed the order of my jquery app and jquery reference order. Thanks for the help anyway.
Works fine:
http://jsfiddle.net/wCRLE/
Try removing the if (jQuery)
Also, have you correctly referenced the jQuery scripts?
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
I always encounter this problem.
My solution is to put the script below the tag I want to manage.
like this:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<input id="Clear" value="Clear Form" type="submit" />
<a id="Evaluate" href="#" >Evaluate</a>
<script type="text/javascript">
$('a').click(function(){
alert("Evaluate Click Works");
var match = $(mintermIndexes).compare(ArrayOfEight);
if(match){
alert("All squares have been checked");
}
});
</script>
</body>
</html>
explanation:
you need to make sure that the "tag" is loaded first
Try this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
alert("Evaluate Click Works");
var match = $(mintermIndexes).compare(ArrayOfEight);
if(match){
alert("All squares have been checked");
}
return false;
});
});
</script>
</head>
<body>
<div id="body">
<input id="Clear" value="Clear Form" type="submit" />
<a id="Evaluate" href="#" >Evaluate</a>
</div>
</body>
</html>
No problem here:
http://jsfiddle.net/5Yttd/
Try getting rid of the if(JQuery)
Also, make sure you are loading JQuery before you load your content scripts. If you don't, nothing will happen.

triggering input file click in IE9

I can't seem to trigger the click event of input file in IE and i don't know what is the problem
<input type="file" class="ruFileInput" />
<button id="clickMe" value="ClickMe" ></button>
<script type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$('input[type=file]').trigger('click');
});
});
it's working fine on firfox and chrome but not in IE9
Add the closing quotes to the class of the first input and add some text to the button to show properly
Here is a fiddle that worked
Also make sure you are grabbing the jquery files as well in your html
Just tested the below and it worked fine. You had missed the closing " at the end of class="ruFileInput
I have tested on IE9 and works fine.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$('input[type=file]').trigger('click');
});
});
</script>
</head>
<body>
<input type="file" class="ruFileInput" />
<button id="clickMe" value="ClickMe" ></button>
</body>
</html>

jQuery click function doesnt work

So I have a very simple code with form and one button
with jQuery I want to bind some actions when user clicks on that button, but some reason it's not working
Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
})
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
please suggest what's wrong with this code as it does not work, even it does not produce any error
You need to wrap it in a document ready handler.
<script>
$(function() {
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
});
</script>
Docs: http://api.jquery.com/ready/
The JavaScript code will be executed before the DOM is loaded, so the element with ID jallerysubmit cannot be found (it does not exists yet).
#sje397 described a very common way (at least when using jQuery) how to solve this. Another way is to put the script at the end of the document:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
<script>
$('#jallerysubmit').bind('click', function() {
alert('asd');
});
</script>
</body>
</html>
Your code attaching the handler is being executed before the element exists in the DOM, therefore the selector returns nothing and the handler is not applied. Put the code inside a document ready handler and it should work. You could also simplify by using the click shortcut.
<script>
$(function() {
$('#jallerysubmit').click(function() {
alert('asd');
});
});
</script>
Include an alert("hello"); right after to make sure the jQuery is working right. Then add a return false to the end of your submit handle to make sure your page doesnt reload when the button is clicked, also use document.ready. See code below
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert("hello");
$('#jallerysubmit').bind('click', function() {
alert('asd');
return false;
});
});
</script>
<form>
<input type="checkbox" name="box1">box1<br>
<input type="checkbox" name="box1">box2<br>
<input type="button" id="jallerysubmit" value="Proved">
</form>
</body>
</html>
Best practice is using an external .js file, example script.js:
$(document).ready(function() {
yourFunction();
});
function yourFunction() {
$('#jallerysubmit').click(function() {
alert('asd');
});
}
and import it in your html file in the tag head:
<script type="text/javascript" src="script.js"></script>
Always use jquery function within
(document).ready(function(){//ur jquery codes});
or
$().ready(function(){//ur jquery codes});
or
$.noConflict();
jQuery(document).ready(function($){//ur codes});
Once DOM of page is loaded above ready function is initiated. so i recommend jquery lovers to write their magic codes always within this code

Categories

Resources