I have the code that I have posted below in my webpage. As you can see it uses the body onload function to launch the script. Is there any way of making this script work without this and in JavaScript instead?
<!doctype html>
<html>
<head>
<script type="text/javascript">
function box(query){
return document.getElementById(query)
}
</script>
</head>
<body onload="box('query').focus();">
<input id="query" type="text">
</body>
</html>
Thanks in advance,
Callum
This might what you're looking for: Attach a body onload event with JS
I'd suggest using jQuery or some other JavaScript framework unless you're exploring JS or have some stringent restrictions on using libraries and frameworks.
the following code helpful for you
this is jquery:
$(document).ready(function(){
function name();
});
or
$(window).load(function(){
function name();
});
the following answers using javascript:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function load() {
alert('function loaded');
}
window.onload = load;
</script>
</head>
<body>
</body>
</html
----------
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function load() {
alert('function loaded');
}
</script>
</head>
<body onload="load();">
</body>
</html
if you are talking about catching the onload event with writting any javascript in your html you can use this function:
// Add event
var addEvent = function (obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
};
Now you can run all the functions you need in your onload event.
addEvent(window,'load',function () {
box('query').focus();
// or
document.getElementById('query').focus();
});
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
#(message: String)(exchangelist: java.util.ArrayList[String])(implicit session: play.mvc.Http.Session)
#main(title = message)(session) {
<head>
...
</head>
<body>
<script>
startup(exchangelist);
<script>
</body>
Code like this, how can I pass parameter "exchangelist" to Js function "startup()"? This method don't work.
I suggest trying the meta tag:
<html>
<head>
<!-- <meta name="exchangelist" content='#{exchangelist.mkstring(",")}'> -->
<meta name="exchangelist" content='yellow,black,green'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script>
function startup(list) {
alert("startup called with " + list);
}
var el = $('meta[name=exchangelist]').attr("content").split(",");
startup(el);
</script>
</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");
}
});
all! I am having a problem using the a simple onclick method. Kindly please help me out. Here is that code... When i click on the button nothing really happens.
window.onload=initall();
var xhr = false;
function initall(){
var btn=document.getElementById('btn');
btn.onclick=alert('hi');
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="testjs.js"></script>
</head>
<body>
<input type="text" required name="id">
<input type="button" id="btn" value="send">
<div id="result"></div>
</body>
</html>
Onclick should be a function, not a statement. Try
btn.onclick=function(){
alert('hi');
}
window.onload=initall();
calls the function initall and assigns the return value of initall as event handler. That is, initall is executed immediately and not when the load event is triggered.
Similar for btn.onclick=alert('hi');. But in both cases, the return value is not a function.
You have to assign functions to those properties, which are then being called when the event occurs.
function initall(){
var btn = document.getElementById('btn');
btn.onclick = function() { // creates and assigns the function at once
alert('hi');
};
}
window.onload = initall; // assign the function reference, no `()`.
I recommend to read the excellent tutorials at quirksmode.org to learn about event handling and of course the MDN JavaScript Guide for the JavaScript basics.
Try this for onclick javascript function call
function initall(){
var btn=document.getElementById('btn');
btn.onclick=alert('hi');
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="testjs.js"></script>
</head>
<body>
<input type="text" required name="id">
<input type="button" id="btn" value="send" onclick="javascript:initall();">
<div id="result"></div>
</body>
</html>
Try this: http://jsfiddle.net/uxfD4/
the onclick assignment accepts a function. What your code did was evaluate alert('hi'), returning null.
Below is the page with two iframes. This page has the javascript function called DoWork() which is called from any frame via window.top.DoWork.
<html>
<head runat="server">
<title>TOP PARENT</title>
<script type="text/javascript">
function DoWork(callback)
{
// do work here
callback();
}
</script>
</head>
<body>
<iframe src="Frame1.htm"></iframe>
<iframe src="Frame2.htm"></iframe>
</body>
</html>
The calling frame needs to pass a reference to its own function such that it can be called from the top most parent. For example
<html>
<head runat="server">
<title>Some frame</title>
<script type="text/javascript">
function WorkIsDone()
{
alert('Work is done');
}
</script>
</head>
<body>
<input type="button" value="Do Work" onclick="window.top.DoWork(WorkIsDone);" />
</body>
</html>
Question: What is the most efficient way to globally reference function WorkIsDone() in the frame such that the top most frame can call it from function DoWork()?
Please note that I cannot hardcode the frame index in the call. Thanks!
Update: There can be nested frames within frames.
Answering my own question ... this is what I have came up with, however this is looping through all frames from top until current window is found. Perhaps there is a more efficient way of doing it
<html>
<head runat="server">
<title>Some frame</title>
<script type="text/javascript">
function FindMe(source, me) {
for (var i = 0; i < source.frames.length; i++) {
if (source.frames[i] == me)
return source.frames[i];
var r = FindMe(source.frames[i], me);
if (r != null)
return r;
}
}
function WorkIsDone()
{
alert('Work is done');
}
</script>
</head>
<body>
<input type="button" value="Do Work" onclick="window.top.DoWork(FindMe(window.top, self).WorkIsDone);" />
</body>
</html>