I want to call a function on my body load. I want to render my html page after getting the response from the function. For example:
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
</script>
</head>
<body onload="welcome()">
<p>hai</p>
</body>
I want the hai to be displayed after pressing ok in the alert box. Can anyone help me with this?
You could do something like this:
<head>
<script type="text/javascript">
alert("Welcome");
</script>
</head>
<body>
<p>hai</p>
</body>
This would alert before the body is loaded, then when you clicked 'ok' it would load the body.
You can do it that way:
<html>
<head></head>
<body onload="render()">
<script>
var content = '<h1>Hello, World!</h1>';
function render() {
var answer = confirm('Do you want to render the page?');
if (answer) {
document.body.innerHTML = content;
}
}
</script>
</body>
</html>
And a live demo.
try this
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
welcome();
</script>
</head>
<body>
<p>hai</p>
</body>
You could add a class to the body to make contents not visible and remove it after the function is called..
<html>
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.body.className = '';
}
</script>
<style type="text/css">
.invisible{visibility:hidden;}
</style>
</head>
<body onload="welcome()" class="invisible">
<p>hai</p>
</body>
</html>
Try this code,
<body onload="welcome()">
<p id='hi'></p>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.getElementById('hi').innerHTML='hi';
}
</script>
</body>
Related
I am trying to access "main" javascript function inside HTML, and getting reference error says "main" is not defined. Can't see what is missing.
<html>
<head>
<title>dataset</title>
<script>
function main(){
....
}
</script>
</head>
<body onload="main()">
<h1>dataset</h1>
</body>
</html>
Your code works fine, just remove the '...' from your function and add alert('test) OR console.log('test) for testing
<html>
<head>
<title>websites dataset</title>
<style>
img{
height:100px;
}
</style>
<script>
function main(){
alert('test');
}
</script>
</head>
<body onload="main()">
<h1>websites dataset</h1>
</body>
</html>
The script has to be defined within the body of the HTML for it to be referenced.
So just rearrange your code to accommodate:
<html>
<head>
<title>websites dataset</title>
<style>
img{
height:100px;
}
</style>
</head>
<body onload="main()">
<h1>websites dataset</h1>
<script>
function main(){
...
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
Hi guys im new to jquery/ javascript. i found some code in w3schools and i want to use it in my website. but i want the animation to trigger ever time i load the page. please help me how to do this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
i want to do something like this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Is this what you wanted:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
try this
$(document).ready(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
if you are approaching for executing the function after Page loaded, then Put below JavaScript at end of your HTML design:
<script type="text/javascript">
window.onload = myFunction();
</script>
And define the function at start of the Page as you've done already!
So, final Code becomes like below:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script type="text/javascript">
window.onload = myfunction();
</script>
</body>
</html>
Let me know by accepting it, if it works :)
I think best way is to use event listener.
<script type="text/javascript">
window.addEventListener('load',myfunction,false);
</script>
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>