Here is the best example that I can create. The value of the innerHTML appears in the alert triggered by the onload function. When it hits the document.write, the same innerHTML becomes null. Any ideas on how to get the innerHTML to appear outside the onload function? I've tried global variables and even copying the value to hidden inputs and it still comes up null.
<html>
<head>
<script language='javascript'>
function onload_function() {
alert(document.getElementById("sample_size").innerHTML);
}
document.write("this is a test: " + document.getElementById("sample_size").innerHTML);
</script>
</head>
<body onload='onload_function()'>
<form name='form_test'>
<table border='0' cellpadding='0' cellspacing='0'>
<tr>
<td id='sample_size' style='display:none'>16</td>
</tr>
</table>
</form>
</body>
</html>
You should try adding the script:
<script language='javascript'>
document.write("this is a test: " + document.getElementById("sample_size").innerHTML);
</script>
in the HTML <body> instead of the in <head>. The value/page isn't loaded yet when that javascript is evaluated in the header.
instead of using a global var try putting it into a hidden input element with a unique id so you can get it with the other function using getElementByID
Without the source code, we can't really help you.
There are three possiblities here.
The variable might not actually be global.
Did you declare it with the var keyword inside the function?
The variable might be assigned to undefined elsewhere.
You may have mispelled its name.
Check the DOM tab in Firebug and see whether the variable is there and what its value is.
You can't write to the td's innerHTML outside of onload because the td doesn't yet exist until onload fires.
It works if you put the call to document.write inside your onload function:
<script language='javascript'>
function onload_function() {
alert(document.getElementById("sample_size").innerHTML);
document.write("this is a test: " + document.getElementById("sample_size").innerHTML);
}
</script>
Related
I work in schools and use google forms to keep track of a number of things.
One of these forms emails people with information from the sheet that is entered.
I have managed to cobble together a good script that provides this service, however, I want it to look good.
My question is simple (or so I believe it is):
When I put in my HTML for the body of the email, how do I call the variables that I have defined earlier in the script?
Do I need to define them in the HTML or can I call them from the JavaScript?
I am not a serious coder by any means but this one has seemed to escape my ability to google it.
Any help would be appreciated.
calling a value of the variable created in javascript, outside the script.
<html>
<script>
var somevariable = "hi"; //this is the variable you create in JavaScript
window.onload = function() {
document.getElementById("blabla").innerHTML = somevariable; //here you send the value of 'somevariable' to html.
}
</script>
<body>
<input type="text" id="blabla" name="someInput"></input>
</body>
</html>
I am not too sure what your code looks like so this is only an attempt to answer what I understand so far.
In you HTML document you don't call variables, you call functions. for example when you click a button, the text would change to what your variable is by calling the onclick Event inside the button, ChangeText() will be the function for the first example:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<button onclick="ChangeText()">Button</button> <!-- onclick event -->
<script>
var p1 = document.getElementById("p1"); //variable created
function ChangeText () {
//when you click the button this function will be called
p1.innerHTML = "Changed text on button click!";
}
</script>
</body>
</html>
You could also call on the load of the document (but this would mean that you would't see what it was before):
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello</p> <br />
<script>
var p1 = document.getElementById("p1"); //variable created
p1.innerHTML = "Changed text on page load!"; //change text on load
</script>
</body>
</html>
hope this helps.
i want to execute two function as soon as my page load , i have used onload in body tag and windows.onload in script but both are not working.
here is my code
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function my_code(){
alert(" Alert inside my_code function");
var text_val = document.getElementById("t2");
text_val.select();
}
window.onload=my_code();
</script>
</head>
<body >
<form name=form1 method=post action=''>
<input type=text name=t1 value=plus2net id="t2">
</form>
</body>
</html>
Substitution or addition to code both are accepted , give some link where i get more information.
thanks in advance
Changing this :
window.onload=my_code();
To this should do it:
window.onload=my_code;
The reason why: my_code() causes the function to be executed. Without () you are passing the function as a reference to the onload event on the window. The onload event when fired will execute the function.
Even better is using the event setter addEventListener. When other code (like jQuery or other libraries) use the window.onload, using addEventListener wouldn't cause the onload event to be overwritten.
window.addEventListener("load", my_code, false); //you need to omit the "on" when assigning with this method.
This is the preferred way.
I am calling a JavaScript function from the HTML Body using the onload event. The JavaScript function executes successfully but the HTML Body contents are not displayed.
I believe, there is an issue with returning from the JavaScript to the HTML Body.
Here is how the code looks like:
<html>
<script type="text/javascript">
function display()
{
document.write("You just executed JavaScript code");
return true;
}
</script>
<body onload="display();">
<p>We are in HTML now</p>
</body>
</html>
This will display the text, "You just executed JavaScript code" in the browser. But the innerHTML of tags is not displayed.
I modified the onload event in tag as:
<body onload="return display();">
And, even this executes only the JavaScript.
If you just want to show the message as alert try this.
<script type="text/javascript">
function display()
{
alert("You just executed JavaScript code");
return true;
}
</script>
</head>
<html>
<body onload="display();">
<p>We are in HTML now</p>
</body>
else
<script type="text/javascript">
window.onload=function()
{
document.getElementById("js").innerHTML = "You just executed JavaScript code";
return true;
}
</script>
<body>
<p id="js"></p>
<p>We are in HTML now</p>
</body>
</html>
As per https://developer.mozilla.org/en/document.write
Once the document has finished loading, calling document.write() will actually first call document.open(), which replaces the currently loaded document with a new Document object. So what you're doing with your code is replacing the original document with one that only contains the string 'You just executed javascript code'.
So if you want to use document.write to place text inline, you would have to use it like so:
<html>
<body>
<p>We are in HTML now</p>
<script>
document.write('You just executed javascript code');
</script>
</body>
</html>
If you want to insert text into the document after it has finished loading, you'll need to use another method, like innerHTML.
Document.write is replacing the contents inside your body tag.
Try something like this.
<html>
<script type="text/javascript">
function display()
{
document.getElementById("text-from-js").innerHTML = "You just executed JavaScript code";
return true;
}
</script>
<body onload="display();">
<p>We are in HTML now</p>
<p id="text-from-js"></p>
</body>
</html>
As the previous answers said. document.write cannot be used for your purpose. And I strongly
recommend that you don't use it anywhere. Its a bad practice.
For your purpose prepending/appending to document.body.innerHTML
ex: document.body.innerHTML += 'You just executed javascript code';
or something like
document.body.appendChild(document.createTextNode('You just executed javascript code'))
should do.
Hi Neon Flash,
I have done some work on your problem.I also research about where is the problem then i found some interesting points hope this will help you
Check here
or you can use
Usually, instead of doing
document.write
someElement.innerHTML
document.createElement with an someElement.appendChild.
You can also consider using a library like jQuery and using the modification functions in there: http://api.jquery.com/category/manipulation/
I have a working JavaScript function declared in the head of an HTML page. I know how to create a button and call the function when the user clicks the button. I want to call it myself some where on the page:
myfunction();
How do I do it?
You can call it like that:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var person = { name: 'Joe Blow' };
function myfunction() {
document.write(person.name);
}
</script>
</head>
<body>
<script type="text/javascript">
myfunction();
</script>
</body>
</html>
The result should be page with the only content: Joe Blow
Look here: http://jsfiddle.net/HWreP/
Best regards!
I'm not sure what you mean by "myself".
Any JavaScript function can be called by an event, but you must have some sort of event to trigger it.
e.g. On page load:
<body onload="myfunction();">
Or on mouseover:
<table onmouseover="myfunction();">
As a result the first question is, "What do you want to do to cause the function to execute?"
After you determine that it will be much easier to give you a direct answer.
Just drop
<script>
myfunction();
</script>
in the body where you want it to be called, understanding that when the page loads and the browser reaches that point, that's when the call will occur.
You can also put the JavaScript code in script tags, rather than a separate function. <script>//JS Code</script> This way the code will get executes on Page Load.
I don't understand what I'm doing wrong here. I just want my function to be called when I click the checkbox. Replacing the function call with alert() works, am I referencing my function incorrectly?
<html>
<head></head>
<body>
<script type="text/javascript">
function select(a){
document.getElementById("myDiv").innerHTML=""+a;
}
</script>
<input type="checkbox" onclick="select(1)">
<div id="myDiv">hi</div>
</body>
</html>
Thanks
Change the function name [e.g. selectFun]. select seems to be reserved keyword
This puzzled me as it looked ok to me too, So ran through the usual tests, eventually tried changing the function name and that worked fine.