assign the javascript code by a javascript function - javascript

For some reason, I have to assign the javascript code by a javascript function, like the code at below.
<html>
<head>
<script>
window.onload = init();
function init(){
document.getElementsByName('content')[0] = alert('LOL');
}
</script>
<script type="text/javascript" name="content">
</script>
</head>
<body>
</body>
</html>
After page load, the expected result should like following
<html>
<head>
<script type="text/javascript">
alert('LOL');
</script>
</head>
<body>
</body>
</html>
However, the alertbox doesn't display. Is there anyone can help me?

To get you started:
Don't misspell script
Don't misspell elements
There is no name attribute for script elements
onload = foo() will call foo immediately and assign its return value to onload. Get rid of the ()
Browsers (AFAIK) won't respect modifications to existing script elements, only new ones. So use createElement and appendChild

Write this instead:
window.onload = function init(){
document.getElementsByName('content')[0] = 'LOL';
alert('LOL');
}

Just changing the text of the javascript tag won't make it execute, because it is in the client side. I would do it more like this:
window.onload = init();
function init(){
document.getElementsByName('content')[0] = function SomeMethod(){ alert('LOL'); };
SomeMethod();
}

Related

Loading AJAX response without DIV

I have a jsp calling AJAX response of which contains script tag
<script>
var globalvar =
var globalvar2 =
</script>
I load the response to a DIV element. However, any variables defined in script tag of DIV are not accessible in other script tags in the body of jsp.
Can someone suggest how to get the script from AJAX response accessible to other script on the page?
I Think you have a timing problem.
a better way to store your variables is in a hidden input field.
<input type="hidden" id="foobar" value="test">
<script>
var myVariable = document.getElementByID('foobar').value; // to get
document.getElementByID('foobar').value = 'test' // to set
It depends on the ordering of your JS scripts. If you're declaring those vars below a script that needs access to them, they will not be available. Take this scenario for example.
<html>
<head>
<script type='text/javascript' src='js/jsFunctions.js'></script>
</head>
<body>
<script type='text/javascript'>
var globalvar = "test";
</script>
<body>
</html>
If you call a function in jsFunctions.js and try to use the globalvar variable, it won't work. Instead, it needs to be created above any script which you need access within the document.
<html>
<head>
<script type='text/javascript'>
var globalvar = "test";
</script>
<script type='text/javascript' src='js/jsFunctions.js'></script>
</head>
<body>
<body>
</html>

How to call a function from javascript file and save the return value as global

Inside an HTML I have a script:
<script src="info.js" type="text/javascript"></script>
Inside info.js there is a function, lets say getInfo(key) which returns info.
How can I call a function located inside info.js from my html, so that I can use this variable inside the whole html document?
w3schools does not explain how to do this
Something like this:
var global; // global var
// js code...
// function
function myFunc(){
global = getInfo(key);
}
This might help you understand what's going on.
Let's say the code below is located inside info.js
function getSomething(){
return "something";
}
Now your HTML might look like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="info.js" type="text/javascript"></script>
</head>
<body>
<span id="mySpan"></span>
<script>
var myText = getSomething();
$('#mySpan').text(myText); //this uses jQuery so you'll need to include that
</script>
</body>
</html>
If I got you correctly, that you want to use that info in all your html file, here's my answer. Let me know if it helps or if you meant anything else, I'll think accordingly.
<html>
<head>
<script src="info.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var info = getInfo(key);
$('div.myinfo').html(info);
});
</script>
</head>
<div class="myinfo"></div>
</html>
You have the desired information in a javascript var and you can assign it as value to a input/select element or copy it as html to a div/td/p/h1 etc.
Just use it like this:
var info = getInfo(key);
As long as your calling script follows the method in info.js (and assuming the function is not private) it should be accessible in any script

Getting entire HTML in JavaScript

I'm trying to get the entire HTML of a page, but it seems that the text stops after </head>. The following code is essentially how I tested this. What am I doing incorrectly here?
<html>
<head>
<script>
document.onload = showHTML();
function showHTML() {
html = document.documentElement.innerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
Okay here is a complete working answer... after checking already posted answer I realized it didn't work for multiple reasons..
First you need to put a function in the onload event. The onload event is written without uppercases.
Also! you need to put the event on the window object as such:
window.onload = showHTML;
Here is a fiddle. Notice on the left that it isn't wrapped inside onload. It's unwrapped in head like your code should be.
http://jsfiddle.net/4zsGH/2/
You should have something like this:
<html>
<head>
<script>
window.onload = showHTML;
function showHTML() {
var html = document.documentElement.outerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
Take off the parenthesis from document.onLoad = showHTML();
What's happening is showHTML() is being called right away, before the rest of the document is being loaded. Taking off the parenthesis means the function is being set to the onLoad callback.
Try:
<html>
<head>
<script>
document.onload = showHTML;
function showHTML() {
var html = document.documentElement.outerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
When you wrote document.onLoad = showHTML(); you didn't assign the reference to showHTML function to document.onLoad but you assigned the value returned by that function i.e. undefined (because you called it). I also changed innerHTML to outerHTML.
Also document.onload shouldn't be written in camel case.
Writing var html = … isn't essential but it wouldn't run in strict mode. Without it you create a html property on global object window implicitly.
I think this is what you are looking for:
document.onLoad = showHTML();
function showHTML() {
var html = document.documentElement.innerHTML;
alert(html);
}
http://jsfiddle.net/skhan/4zsGH/

JQuery $('#id") does not work

I'm a noob in JQuery, trying my hands on the basic functionality of it
I have a html, like below.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/start.js"></script>
<script>
$(mainFunction());
$('#label1').prop('innerHTML', "test");
</script>
<title></title>
</head>
<body>
<label id="label1"></label>
</body>
</html>
From start.js, i'm trying to manipulate the elements in this html file like below.
function start(name){
this.iam = name;
this.getName = function(user){
return this.iam;
}
}
function mainFunction(){
var label = $('#label1');
var oStart = new start("test");
label.prop("innerHTML" ,oStart.getName("test"));
}
When I try to lookup whats in the 'label' in the above code, i get [] printed on the console. What am I doing wrong here?
$(mainFunction()); is your issue. Instead provide function reference to document.ready.
Like this:
$(mainFunction);
While doing $(mainFunction()); you are invoking the function mainFunction while setting up the handler, which means it gets executed too early before the DOM tree has been constructed.
Or in order to avoid confusion you could do:
$(function(){
mainFunction();
});
Also remember that this issue will not happen if you move your script just before the end of the body tag. You do not have to listen to document ready handler. Plus as a shorthand you could just do label.html(oStart.getName("test"));
You need to wait for the DOM to be ready before using jQuery.
This is done this way:
$(document).ready(function() {
// All your code touching the DOM in here
});
Also note that this line: $(mainFunction()); uses the return value of mainFunction, it does not trigger it when DOM is ready.

passing a variable (id) from html to external js file with functions

I'm novel with javascript, and I trying to develop a webpage with dynamics graphs using for that canvas, html 5 and javascript. I wouldn't like to mix html "code" with javascript code, so I decided to keep it separated and call from html the javascript functions. The fact is that when I try to pass my canvas Id to javascript function I'm making a mistake and I have no idea how to fix it. This is my html code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js">
window.onload = drawRectangulo('myCanvas');
</script>
</head>
<body>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
And my JavaScript file is like this:
function drawRectangulo(idCanvas)
{
var Canvas = document.getElementById('idCanvas');
var context = Canvas.getContext('2d');
context.fillRect(50,0,10,150);
}
I don't know if the call to drawRectangulo function on javascript file is right, and if I'm passing the canvas's id right: window.onload = drawRectangulo('myCanvas'); ¿How should I pass the Id from the html file to the js function?. Should I use: ('', "",) or should I create a new variable, initiate it with the canvas's id and pass it to the function? Am I processing good the variable id inside JavaScript function?
You need to do this:
window.onload = function () {
drawRectangulo('myCanvas');
}
Your code is calling drawRectangulo as soon as it runs, and assigning the result of the call (which is undefined) to window.onload.
Edit based on Dan's comment: you also need to change this:
document.getElementById('idCanvas');
to this:
document.getElementById(idCanvas);
Edit 2: You also need to separate your imported script from your inline script, like this:
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>
A single <script> element can either import a script from another file, or define an inline script, or both. (That explains why moving your inline script elsewhere in your HTML made it work.)
I think this
var Canvas = document.getElementById('idCanvas');
should be
var Canvas = document.getElementById(idCanvas);
With those apostrophes there, you're not referencing the parameter.
I think I know why it doesn't work. I have made this change on html and now is working right:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
window.onload = function (){
drawRectangulo('myCanvas');
}
</script>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
I took out the window.onload from the header to the body and it worked. Thanks for your help anyway.

Categories

Resources