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>
Related
how can we declare a variable globally so that we can use it in different different scripts written within same page.In below code how can i declare variable globally in script 1 so that i can used it in script 2.
.php page
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//this is first script//
</script >
<script type="text/javascript">
//this is second script//
</script >
</head>
</html>
You need to properly closing the script tag .and declare the var in first one then access with below script .
Order of the script is more important.
if you add some other js link to handle var a.add this new link below the first one
Updated
1.defined variable validation
and replace the global varibale
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//this is first script//
var a ="hi"
</script>
<script type="text/javascript">
//this is second script//
if(typeof a !== "undefined") { // for defined varibale validation
console.log(a)
a='hello' // replaced
console.log(a)
}
</script>
</head>
</html>
i suggest you to create one file for global variable like
1st glob.js
and Code like
<script type="text/javascript">
//this is GLOBAL script//
var a ="MY_FRIST_VAR"
</script>
and used it as
<script type="text/javascript" src="glob.js"></script>
<script>
console.log(a)
<script>
I have a question about javascript function flow. I am building a chrome extension where one javascript file creates a popup window using window.open. Based on the button selected in the popup, a variable is set and a function in the original javascript function should be called. But, it doesn't recognize that function from the original javascript file. I don't want to include file1 in file2's header, because other functions that I don't need would be called within file2. How do I handle this case?
A snippet of my code is the following:
in default_popup.html
<html
<head>
<script type="text/javascript" src="login.js"></script>
</head>
</html>
in login.js
function login() {
if (token === null) {
var url = chrome.extension.getURL('options.html');
window.open(url);
}
else {....}
function auth(url) {
............
}
//other functions here
in options.html
<html>
<head>
<script type="text/javascript" src="redirect.js"></script>
</head>
<body>
<button id="button1">Option1</button>
<button id="button2">Option2</button>
</body>
</html>
in redirect.js
var url;
document.getElementById('button1').onclick = function() {
url = 'url_one.com';
auth(url)
}
document.getElementById('button2').onclick = function() {
url = 'url_two.com';
auth(url);
}
Create a different JS file and you can call it common.js.
Transfer all the functions that needs to be accessed by both files there.
It is possible passing a function in the window reference, however chrome security setting may interfere that with local files because of the "same origin security principal", it works in other browsers on local, not sure in server pages and extension, so worth the test, follow the example:
html1:
<html>
<head>
<script type="text/javascript">
function test(){
var windowRef = window.open('test2.html');
windowRef['auth'] = function(){windowRef.document.write('property transferred')}
}//here you'll reference your auth function.
</script>
</head>
<body>
<input type="button" value="test" onclick="test()" >
</body>
</html>
html2:
<html>
<head>
<script type="text/javascript">
window['auth']() //the function to call, window.auth() should work too.
</script>
</head>
<body>
new window
</body>
</html>
The output will be a new window with "property transferred" in it.
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
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.
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();
}