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).
Related
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).
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 am defining the source of a .js file and attempting to call a function from that file in the same tag, as follows:
<script type="text/javascript" src="jsFunctionTest.js">
testMethodCall();
</script>
The .js file just contains:
function testMethodCall(){
window.alert("Hello there");
}
This doesn't work, I don't see the alert.
However, if I change the tag to two tags, as below, then it works:
<script type="text/javascript" src="jsFunctionTest.js"></script>
<script type="text/javascript">
testMethodCall();
</script>
This seems pretty messy. Is there any reason the first one doesn't work?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
You cannot register an external file and use the content in it, both at a time inside <script> tags. Only either one is allowed.
This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.
Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.
<script type="text/javascript" src="bar.js">
foo();
</script>
I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.
I can run a function similarly with a button click...using the script tag above and this.
<button type="button" onclick="foo();">Click Me</button>
I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.
The way I tried this was like so...
<script type="text/javascript" src="bar.js">
var a = "blah";
var b = "blab";
</script>
.... (some more html)
<button type="button" onclick="foo(a,b);">Click me </button>
Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?
Thanks for the help in advance.
I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.
<html>
<head>
<script type="text/javascript" src="bar.js">
</script>
<!--From what yall say I should have another script
tag here for anything else. Say some variable?-->
<script type="text/javascript">
var a = "hello";
var b = "text";
</script>
</head>
<body>
<!--This should work now?-->
<button type="button" onclick="foo(b,a)">
Click me
</button>
</body>
</html>
bar.js contents:
function foo(id,string){
document.getElementById(id).innerHTML = string;
}
I got this to work.
Thanks everyone.
You need to first include the javascript containing the function:
<script type="text/javascript" src="bar.js"></script>
and then call it in another script tag:
<script type="text/javascript">
foo();
</script>
In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.
According to the specification:
The script may be defined within the contents of the SCRIPT element or
in an external file. If the src attribute is not set, user agents must
interpret the contents of the element as the script. If the src has a
URI value, user agents must ignore the element's contents and retrieve
the script via the URI.
So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.
On the first page:
<button type="button" onclick="myFunction()">click</button>
Then on another page:
myFunction() {
alert("working");
};
This is the receiving page.
all the basic tags
<script>
function alert() {
alert("The Link Has Been Successful");
}
</script>
The question is: How do I call the other function on the other page to alert that page <button onclick="????">?
<body>
<button onclick="???" type="button">Alert on the other page</button>
</body>
Call a function in one page when the function is on another page
That is not possible. The definition of said function must be present on the current page for it to be executed.
The standard approach is to extract your function into it's own (or global) JavaScript file. Then reference it on pages that need to use it.
You can place all your global functions etc in a .js text file and then on all pages that need to call any of these routines you should declare it like this...
<script src="myglobals.js" type="text/javascript"></script>
Now you can access your global functions and variables. Good luck!
You do not need to link 2 pages together you just need to link them to your index.html by using: and then js will do all the work for you!
Hope This Helps!
LucaSpeedStack