I have a button that is supposed to have onclick="submitItem()" but the function does not work when it is created in an external javascript file (app.js).
<button class="btn" type="submit" onclick="submitItem()">Save</button>
When the function is placed in between script tags, then it works, but that's not what I want.
<script src="./js/app.js" type="module"></script>
<script>
function submitItem() {
alert("works");
}
</script>
But this does not work:
app.js
function submitItem() {
alert("does not work");
}
What can I do?
It isn't a module. Don't claim it is. Remove type="module".
(Top-level variables, including those created by function declarations, are scoped to the module and not as globals in ES6 module scripts).
Related
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();
});
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 have a global file functions.js with global javascript functions which are called from other javascripts. Why is not this working on my android phone?
Functions are defined like this in functions.js
function function_name(){
alert("test");
}
And called like in the other javascript files.
function_name();
Is there another way to deal with global javascript functions to get it working on android?
It was a function defined with a parameter like:
function example(parameter = ""){
...code...
}
which made it impossible to call functions.
If you want to call a global function that is delcared in a .js file, from a different HTML file, then you must include the .js file in the <script> tag
/* Your code.js should look like: */
function function_name(){
alert('test');
}
then
<!-- and your HTML file should look like -->
<HTML>
<HEAD>
<SCRIPT SRC='code.js'></SCRIPT>
<script>
// you may call your globar function here:
function_name();
</scirpt>
</HEAD>
<BODY>
<script>
//you can also call your function anywhere here:
function_name();
</script>
</BODY>
</HTML>
I am not that good in code but I want to learn it
but now I have this problem
in my index.html I have this
<script type="text/javascript" src="js/initresize.js" ></script>
and then in the same file
I have this
<input type="button" onclick="test();" value="Click Me!" />
I now that the file path is correct because when I comment out the src line my website looks weird. (no background etc)
but I get this error when pressing the button
"test is not defined"
this is my initresize.js
function test()
{
alert('Button clicked!');
}
You've defined test inside another function, so it is scoped to that function instead of being a global.
Define it outside other functions if you want it to be a global.
(Better yet, don't. Use JavaScript event binding instead 90s-style event attributes).
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.