how to call one file input id into another file using javascript - javascript

im having 2 html files, in my first file i have declared a variable and i want to use the same variable in my second file...
my first file code is
<script type="text/javascript">
function topics(clicked_id)
{
var ids = clicked_id;
var myObject, fol;
myObject = new ActiveXObject("Scripting.FileSystemObject");
if(!myObject.FolderExists("D:/JavaScript/Work/Days/"+ids))
{
fol = myObject.CreateFolder("D:/JavaScript/Work/Days/"+ids);
}
load_page();
}
function load_page()
{
open("file:///D:/JavaScript/Work/Topics_Page.html");
}
</script>
i want to use "ids" variable in my second file...
Thanks;

If the HTML documents have the same origin you can use postMessage, MessageChannel, SharedWorker or storage event to communicate between different browsing contexts, see
How can I load a shared web worker with a user-script?
Can we refer to JavaScript variables across webpages in a browser session?
how to pass data from one html page to second in php?
You can use localStorage and storage event to use the same object variable, or define a local variable set to the value of localStorage at a different HTML documenta having the same domain.
<!DOCTYPE html>
<html>
<head>
<title>index</title>
</head>
<body>
otherPage.html
<h1>set id</h1>
<script>
let id;
let h1 = document.querySelector("h1");
h1.onclick = e => {
id = `${Math.E * Math.PI * Math.random()}`;
localStorage.setItem("id", id);
console.log(`id: ${id} at ${e.type}`);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>other page</title>
<script>
let id = localStorage.getItem("id");
console.log(`id: ${id} at ${document.title}`);
onstorage = e => {
console.log(`id: ${localStorage.getItem("id")} at ${e.type}`);
id = localStorage.getItem("id");
console.log(id);
}
</script>
</head>
<body>
<h1>otherPage.html</h1>
</body>
</html>
plnkr https://plnkr.co/edit/m4RIdwgIl74Dk6YmGAgI?p=preview

Related

I want to assign one variable twice but only want to use first one in javascript

There is a file name vicidial.php in vicidia file a value is assigned
var DiaLControl_auto_HTML = 'something'
I dont want to edit in this file but i want to edit this variable from other file so i created file_js.js but when i assigned var DiaLControl_auto_HTML = 'my_value' its only use first one eg. something i want to override my variable. how can i do this ?
<script src="file_js.js"></script>
in vicidial.php
var DiaLControl_auto_HTML = 'default value';
in file_js.js
var DiaLControl_auto_HTML = 'my_value';
In vicidial have:
<script>
var DiaLControl_auto_HTML = 'default value';
</script>
<script src="file_js.js"></script>
in file_js.js
window.addEventListener("load",function() {
window.DiaLControl_auto_HTML = 'my_value';
})
this is a workable code , try it. I hope it can help you.
main html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test Var</title>
<script src="file_js.js"></script>
</head>
<body>
<br>
Value before : <span id="valueBefore"></span><br>
<br>
Value after : <span id="valueAfter"></span><br>
<br>
<script>
var DiaLControl_auto_HTML="default value";
// the function() wil be executed when your page is loaded
// better use readystate==complete, but it is a another problem...
window.addEventListener("load",function() {
// set var
DiaLControl_auto_HTML = 'my_value';
// show it in browser
document.getElementById('valueBefore').innerHTML=DiaLControl_auto_HTML;
// call method on file_js
myOwnFunction();
// show it in browser
document.getElementById('valueAfter').innerHTML=DiaLControl_auto_HTML;
})
</script>
</body>
</html>
file_js.js
// file_js.js FILE
function myOwnFunction () {
DiaLControl_auto_HTML="Value changed";
}

How to update html document using feather js?

I have a service that I call after every 5 secs to return data from postgres table, now I want this data to be displayed on html document
app.js
const stats=app.service('test_view');
// console.log(stats);
function getstats(){
stats.find().then(response=>{
console.log('data is ',response.data)});};
setInterval(function() {
getstats();
}, 5000);
// console.log(stats);
stats.html
<!DOCTYPE html>
<html>
<head>
<title>Stats</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>
Everything is running fine and I am getting results in console, I am using feather.js now I want these results to be displayed in div tag of html.Please help me in this regard.
You need to call the feathers service from the browser. You can do this a number of different ways (as a REST call, with the feathers client, etc.).
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script src="//unpkg.com/#feathersjs/client#4.0.0-pre.3/dist/feathers.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script>
// #feathersjs/client is exposed as the `feathers` global.
const app = feathers();
app.configure(feathers.rest('http://localhost:3000').axios(axios));
app.service('test_view').find();
})
.then(data => {
// do something with data
});
</script>
</head>
<body></body>
</html>
A lot of this depends on what (if anything) you're using for your front-end implementation. This sets up a minimal feathersjs/client using axios for REST, with no authentication, and calls your service (on port 3000) and gets the payload.
To do this every 5 seconds is outside the scope of feathers and up to how you build your web app.
Here is a working example of how you could change the contents of that div when you get data back from your remote call.
// Simulate your remote call... ignore this part.
const stats = {}
stats.find = () => new Promise((resolve, reject) => resolve({
data: 'here is some data ' + new Date().toLocaleTimeString('en-US')
}));
// Div you want to change.
const resultsDiv = document.getElementById('stats');
// Get the data
function getstats () {
stats.find().then(response => {
console.log('data is ', response.data);
// Update the contents of the div with your data.
resultsDiv.innerHTML = response.data;
});
}
setInterval(function() {
getstats();
}, 1000);
<html>
<head>
<title>Stats</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>

Passing a variable in JavaScript to open.window

I have variable which is i think global ,,so all my child functions must be able to get that variable,But i am getting a reference error,Variable not declared
Here is below code.Please help if i am doing any wrong thing.Thanku
<!DOCTYPE html>
<html>
<head>
<script>
var Test1Object = 'Testing'; // This is my variable
</script>
<script src = 'ch.js'>
</script>
</head>
<body>
<button onclick="openwindow()">Create window</button>
</body>
</html>
My Ch.js
(function(){
alert(Test1Object) // Here i am getting this object
this.openwindow = function() {
w =window.open("untitled.html",'TheNewpop','height=315,width=625');
w.document.write(
"<body>"+
"<\/body>" +
"<script src = \"windowpo.js\"><\/script>" // THis is where i reference my windowpo.js
)
w.document.close();
w.focus();
}
})()
My windowpo.js
(function(){
alert(Test1Object) // Here there is not Test1Object (Reference error)
})();
My issue is that in my windowp.js how can i get my Test1Object Variable...
Easy doing by just acessing your refrence inside the window by using window.opener like in this runnable demo plnkr. Inside your window application you can access it via window.opener.Test1Object where window.opener holds a reference of the JavaScript instance where it was opened. In that way you can access all the stuff you configured in your main application:
Source: window.opener MDN reference
View
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<script type="text/javascript">
var Test1Object = 'Testing';
</script>
<script src="main.js"></script>
</head>
<body>
<a onclick="openwindow()">Open Window</a>
</body>
</html>
main.js
this.openwindow = function() {
w = window.open(location.href+"untitled.html",'TheNewpop','height=315,width=625');
w.document.close();
w.focus();
}
unitiled.html
Some Test
<script src="windowpo.js"></script>
windowpo.js
alert(window.opener.Test1Object);
As most other answers don't seem to even read the question properly, I'll add my 2 cents as an answer, too:
The main problem in your code, is that you have to JS execution contexts here: One for the original page (the HTML code you show) and one for the popup you open in Ch.js. In general both do not share any data, variables or whatever.
You have, however, a window object reference in your variable w after calling window.open(). You use this already to inject HTML code to the popup.
If you now want to have JS variables available in the popup JS context, you can either inject additional <script> tags into the popups HTML code and set the variables there (bad choice, imho) or use postMessage() to send data across. I give some sample code for the postMessage() variant below:
Ch.js
this.openwindow = function() {
w = window.open("untitled.html",'TheNewpop','height=315,width=625');
w.document.write(
"<body>"+
"<\/body>" +
"<script src = \"windowpo.js\"><\/script>" // THis is where i reference my windowpo.js
);
w.document.close();
w.focus();
// wait for pupup to be ready
window.addEventListener( 'message', function( e ){
// send the variable
if( e.data == 'inited' ) {
w.postMessage( Test1Object, '*' );
}
})
}
windowpo.js
// wait for messages from opener
window.addEventListener( 'message', function( e ) {
alert( e.data );
});
// tell the opener we are waiting
window.opener.postMessage( 'inited', '*' );
For some more information see the respective MDN article on Window.postMessage().
You need to declare the variable before you include in any file. Simply create a script tag above the included files define it there.
<script type='text/javascript' >
var Test1Object = 'Testing';
</script>
<script type='text/javascript' src='js/Ch.js'></script>
<script type='text/javascript' src='js/windowpo.js'></script>
this way you should be able to use withing all files

How to insert variable into <img> src parameter?

I am trying to generate QR code on my webpage with a data (id) I get from web service. I can not figure out how to insert a javascript variable as a part of <img> src parameter.
As you can see I can change the src using myFunction (AFTER button clicked). But I do not know how to insert id variable to the initial page load (to replace ID1_GOES_HERE at the end of img line).
Please help!
Here is a code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";
function myFunction(){
var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
document.getElementById('qr_img').src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl="+id2;
}
</script>
<img id="qr_img" src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl=ID1_GOES_HERE"/>
<button onclick="myFunction()">test</button>
</body>
</html>
Don't use a button click handler, just call the function from your script:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";
function myFunction(){
var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
document.getElementById('qr_img').src = document.getElementById('qr_img').src + id2;
}
myFunction();
</script>
<img id="qr_img" src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl="/>
<button>test</button>
</body>
</html>
The click handler is used to capture the button click event, and do something at that time. That's not what you want, so remove the button click handler.
At the end of the <script> element, simply call myFunction() to do what it's intended for.
If you wanted to run the script after the entire document and all of its dependencies were loaded, you could do this:
<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";
function myFunction(){
var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
document.getElementById('qr_img').src = document.getElementById('qr_img').src + id2;
}
document.onload = myFunction();
</script>
For this simple case, you probably don't actually need a function at all, and the body of myFunction can simply be placed inline, like so:
<script>
var id1 = "41c0236f-ed21-4182-be3d-26513078f704";
var id2 = "41c0236f-ed21-4182-be3d-26513078f704";
document.getElementById('qr_img').src = document.getElementById('qr_img').src + id2;
</script>
The function would be useful if you had more logic involved, and needed to organize (or modularize) it.
You could add this to your script below where you declared and set the id1 variable
function Window_OnLoad ()
{
document.getElementById("qr_img").src="http://chart.apis.google.com/chart?cht=qr&chs=300x300&chld=H|0&chl="+id1;
}

Issue with getElementById

I have written the following code to display an input with Javascript's alert( ... ) function.
My aim is to take a URL as input and open it in a new window. I concatenate it with 'http://' and then execute window.open().
However, I just get 'http://' in the URL name, even after concatenation, and not the complete URL. How can I fix this?
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<body onload="onload();">
<input type="text" name="enter" value="" id="url_id">
<input type="button" value="Submit" onclick="func();">
</body>
<script type="text/javascript">
var url;
function onload() {
url = document.getElementById("url_id").value;
}
function func(){
var var1 = "http://";
var var2 = url;
var res = var1.concat(var2);
alert(var2);
//window.open(res);
}
</script>
</head>
</html>
You shouldn't be calling it in onload(), only after the user has entered the url into the input field. Of course its an empty string, because you assign url to the value of #url_id before the user has a chance to enter anything when you place it in onload().
function func(){
var var1 = "http://";
url = document.getElementById("url_id").value;
var var2 = url;
var res = var1.concat(var2);
alert(var2);
//window.open(res);
}
Others have given solutions, and you already have accepted one. But none of them have told you what is wrong with your code.
Fristly, you have a body element inside your head element. This is invalid markup. Please correct it:
<html>
<head>
<!-- this is a script -->
<script type="text/javascript">
// javascript code
</script>
</head>
<body>
<!-- this is an inline script -->
<script type="text/javascript">
// javascript code
</script>
</body>
</html>
Secondly, you need to have an idea about the execution order of JavaScript inside browser windows. Consider this example:
<html>
<body onload="alert('onload')">
<p>Lorem Ipsum</p>
<script type="text/javascript" >
alert('inline');
</script>
</body>
</html>
Which alert do you thing will get executed first? See the JSFiddle.
So as you can see, inline JavaScript will be executed first, and then the browser will call whatever code is in <body onload=.
Also, onload function is called immediately after the page is loaded. And user has not entered anything when the function is executed. That is why you get null for url.
function func()
var url = document.getElementById("url_id").value;
var fullUrl = "http://".concat(url);
alert(fullUrl);
// or window.open(fullUrl);
}
You're not concatenating with a String but with an Object. Specifically an HTMLInputElement object.
If you want the url from the text input, you need to concatenate with url.value.
if its not concatenating, use:
var res = val1+val2.value;

Categories

Resources