Javascript doesn't work in html file - javascript

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.

Related

External JavaScript Not Running, does not write to document

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

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()">

Store contents of a tag in Javascript variable

I am learning Javascript and I am trying to learn some pretty basic stuff. Basically I have some text in a <p> tag which I want to append to a variable. However it is not working an I'm not sure why. Any help will be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</head>
<body>
<p class="first">Hello World </p>
</body>
</html>
Wrap your code in $.ready handler:
<script type="text/javascript">
$(function(){
var x = $('p').html();
document.write(x);
});
</script>
The ready handler fires after DOM has loaded and parsed meaning only then you can maipulate tags (or DOM).
You are running your script before The <p class="first">Hello World</p> is reached in your HTML. Put your script in the body instead just after the <p> tag:
<html>
<head>
<script type="text/javascript" src="js/jquery.js"> </script>
</head>
<body>
<p class="first">Hello World</p>
<script type="text/javascript">
var x = $('p').html();
document.write(x);
</script>
</body>
</html>
You can also use jQuery's ready function like some others have said, but that's an inefficient solution since you already know at which point in the document the <p> tag is loaded. It's much better to run your script as soon as it's loaded then to wait for the whole document to load using $.ready.
I can't see anything what isn't working (example)
maybe you should write
jQuery(document).ready(function($){
//your javascript code
})
but if it doesn't work with that either I should remind you that document.write normally replaces the content

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

Calling JavaScript function before the end of body

How do I call a JavaScript function before the end of the body of an HTML page?
You can just place a <script> block in there, like this:
<script type="text/javascript">
myFunction();
</script>
</body>
Also, if you're using a framework of some sort, most of them have handlers for when the DOM is ready, or you can use window.onload, whatever best fits your situation.
<html>
<head>
<script...>
function helloWorld() {
alert('Hello world!');
}
</script>
</head>
<body>
...some content...
<script...>
helloWorld();
</script>
</body>
</html>

Categories

Resources