I have created a new electron application.
It consists of the following files:
index.html
main.js
renderer.js
In the index.html I have added a button with an onclick event:
<button onclick="myfunction()">Call Function</button>
And the function is just an alert for testing purposes:
myfunction() {
alert('I am the js function');
}
My problem is that I've added the function code to both the renderer.js and to the bottom of main.js and when I click the button I see no alert.
How can I get js functions to be called from the index.html?
Let the myFunction reside in a separate javascript file. Let's say it's named "functions.js". To use this function in the HTML file (index.html), simply add the Javascript code using tag in the following manner -
<html>
<body>
...
</body>
<script type="text/javascript" src="./functions.js"></script>
</html>
Now, we will need to attach an onclick listener to the button that is rendered using the HTML code.
To do that, add the following in functions.js
document.getElementById('btn').addEventListener("click", function(){
myFunction();
});
Related
I hava many jsp page using the common function in body's onload and onunload event when using ocx control.So I extract the common function in one js file call common.js and import the js file in the jsp page.But I find the sometimes the jsp page could not execute the function in js file.Finally,I solve the problem in two way but I think there must have the other simple way?How to simplify my js code?
write all the js function in each jsp,it works well
in the each jsp file,includ the common.js,and in the jsp file the script call the function before load the common.js,but I think it have already be loaded two times
//init(),asynclogin_onclick(),logout_onclick() function is in the common.js file
<head>
<script type="text/javascript" src="/js/common.js"></script>
</head>
<body onload="init()" onunload="logout_onclick()">
$(function(){
$.getScript("/js/common.js")
.done(function(script,textStatus ) {
asynclogin_onclick();
});
});
I try to write the code like this,but it could not work.
$(function(){
asynclogin_onclick();
});
HI i am facing some problem while calling function from index.html on load event
it return error readjson is not defined in console.
index.html
<script type="text/javascript">
$(window).load(function () {
readjson('a','s');
});
</script>
main.js file
<script type="text/javascript">
function readjson(val1,val2){
//some code
}
</script>
Can anyone tell me why it is not able to call, i have link main.js file to index.html
JavaScript files shouldn't include any HTML.
Remove <script type="text/javascript"> and </script> from main.js.
You should see an error when that file is loaded (along the lines of Unexpected token <).
Call it like this inside the js file without the "script" tag :
function readjson(val1,val2){
//some code
}
In index.html you need the "script"
And follow the advice given in the comments, always include first the .js file and then the function in the index.html
Did you add jquery link properly??
If not, you should add jquery link for $(window) to be called. such as..
<script src="http://code.jquery.com/jquery-latest.js"></script>
If you actually have two script declarations as you are showing here the the window load will fire first. It then look for your function, which has not been created yet. That's why you are getting undefined.
You could have one script declaration on the page and place your function in the load function.
<script>
$(window).load(function () {
readjson('a','s');
function readjson(val1,val2){
//some code
}
});
</script>
Remove tags from main.js:
<script type="text/javascript"> and </script>
and remember to include jquery and main.js with:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="test.js"></script>
I have to use a plugin which bundles js files inside html files (gadgets). For one use case I need to drop and re-instantiate a gadget to run updated code.
So say I have foo.html:
<html>
<head>
<script src="foo.js"></script>
</head>
<body>...</body>
</html>
and foo.js which is the file being injected into my actual document's head:
alert("hello");
Problem is I can only cachebust the html file dynamically and declare my gadget as foo.html?x=123, but the JS file I'm after will still be foo.js so the browser will not re-run it.
Question:
Once a <script> tag is inserted into the document and run, is there any way to run it again without using a module-loader or eval?
Thanks!
You could wrap your code in your <script> tags in a function then call your function. This will allow you to call your code to be called multiple times. Like this:
<script>
function loaded(){
// JavaScript here
}
loaded();
</script>
</body>
I am trying to get to grips with Knockout and so I have created the following html file...
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
<script>
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working!!');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
</script>
</html>
When I load the page all is well in the land of milk and honey. I get an alert that says the binding is starting.... Then I get another alert saying that its done and when I click the button... Yip you guessed it I get an alert stating that its working.
The problem I am having is when I try to separate the java-script code out into an external file it does not apply the bindings.
So my html file will look like this......
<html>
<head>
<script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.2.0.js'></script>
<script type='text/javascript' src='jsfile.js'></script>
</head>
<h1>Welcome<h1>
<button data-bind="click: speak">Say it</button>
</html>
And my file "jsfile.js" looks like this....
alert('Binding Started');
function indexViewModel() {
this.speak = function() {
alert('Working asstastic');
};
}
ko.applyBindings(new indexViewModel());
alert('Binding Done');
When I now load the html page I get an alert for the binding starting and then ... Nothing...... :(
If I remove the line for the ko.applyBindings(.. then it gives me the second alert that the binding is done. however obviously the button does noting.
What am I doing wrong It seems like its not seeing the knockout functions in the .js file but I have hit a brick wall..
Please help..
The 'head' html tags will get loaded before the 'body' tags...
Your applying knockout bindings in your 'head' tags.
( in your custom .js file after including knockout )
These bindings / Javascript code is loaded / executed / happening before the body has been loaded;
Thus its / knockout is trying to bind js data to html body UI content which the browser / window does not yet know about.
p.s. - Put your content in a 'body' after the 'head'. Then include your custom .js file after the 'body,' this way everything is now loaded in order to achieve what you want. Alternatively... Include logic in the .js itself to execute after DOM / window has finished loading.
(Thanks to Jody Geers who pointed me in the right direction)
Ok I Was being an HTML noob..
No Body<>
Added them and then did the
<script type='text/javascript' src='jsfile.js'></script>
Works fine now..
Please put your js file after the Body .if you keep the Knock out js file in head then will not the UI with Model.As UIs are not found in the js file.
Ok, I know how to register my js file in my html and call functions in the .js from my html file. Here I am trying to do the opposite , I have a function in the .js file and I want to call a function that is in my html file. How do I go about registering the html (it's actually .aspx ) but that really shouldn't matter for the scope of this question.
Just make sure that the JavaScript function in your HTML is defined on the page before the code in the .js include calls it.
Simply include your external script to the page at the end your body tag or at any place after your function declaration.
Aspx page:
<body>
content content
<script>
/* Function to be called */
function s(){
alert('Hello World!');
}
</script>
<script src="myJS.js"></script>
</body>
myJS.js:
/* Call a page function */
s();
By the time your external file is loaded your function s() will be declared.