My javascript file(test.js) has Method1() method defined.
<script src="../Scripts/test.js" type="text/javascript"></script>
My html is defined as below. I get Method1() not found. Any ideas?
<p><input type="button" name="login" id="login" value="Login" onclick="Method1()"/> </p>
Here is the code in test.js declared...
<script type="text/javascript">
function LoginToServer() {
......
}
</script>
The code in .js file is a JavaScript code, not HTML markup.
This:
<script type="text/javascript">
</script>
is HTML markup, not a JavaScript code. You should remove that from test.js.
As you didn't show us exactly how your Method1 is defined, I'll assume it is ok and this is the only error.
The reason Method1() isn't detected is because your test.js has a syntax error - the <script></script> tags.
Remove the opening and closing <script> tags from your test.js and everything should work properly.
function LoginToServer() {
//function code
}
.js files should only contain JavaScript code.
.html files may also contain JavaScript, but then the code has to be surrounded by <script></script>.
Also, you don't have to provide the type="text/javascript" because HTML5 knows it is going to be JavaScript in-between those tags.
Related
I can create a jQuery function within my HTML no problem:
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
</script>
</body>
This does exactly what I intend it to do.
I read it was a good idea to create a separate script to contain the actual function, so I put the script in its own file...
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/js/jQueryPractice.js"></script>
</body>
Here is the .js file with the jQuery
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
As soon as I do this, the functionality no longer works.
From everything I have researched, this should be working as intended; I have read multiple tutorials that use this method. I must be missing something simple...
This path:
src="~/js/jQueryPractice.js"
Uses ~, which doesn't really mean anything to a browser. What URL do you expect that to refer to? Should it be the root of the server?:
src="/js/jQueryPractice.js"
Relative to the page?:
src="./js/jQueryPractice.js"
Something else?
Whatever the URL is for the script, relative or absolute, that's what needs to be used in the src attribute.
Here is what got it to work.
My project has a 'wwwroot' directory. It was included when generating a new ASP.NET Core application through Visual Studio.
There is a js folder inside of this. When I put my script in there, the browser started finding it successfully.
This was the HTML:
<script src="~/js/jQueryPractice.js"></script>
The '~' seems to refer to 'wwwroot'. The script is now referencing and behaving as intended.
I wrote a function in Html and it works well.
But My teacher said we need separate the code out of HTML file. So I need to implement this code in a .js file. Can anyone tell me how to do that? I think to create a function in JS like this but it not working.
Thanks for any help!
<script>
$(document).ready(function() {
$("#down").on('click',function(event) {
$('html,div-b').animate({scrollTop: document.body.scrollHeight
-1100},"slow");
});
});
You have use html file like this
<html>
<body>
<script src="demo.js">
</script>
</body>
</html>
and keep the js file like this
demo.js file
function test(){
<!---your code here-->
}
copy the code inside the <'script> tag and paste in a separate .js file . This is how it works
Put all the js code in a .js file, then put the code below in the html page which will call it, inside the head or the body.
<script src="myScript.js"></script>
Write the code as it is in file and save it with .js extension and link it in html under head tag as follows
<script src="myscripts.js"></script>
This is the smallest simplest start I could think of, and of course it errors. I'm running a .cshtml page. Here is the code for having function in the SAME file just lines apart:
#section head
{
<script>
function CheckPostalCode(form) {
if (form.postalcode.value.length < 5) {
alert("Please enter a Zip Code.");
form.postalcode.focus();
return false;
}
return (true);
}
</script>
}
Now in the webpage below:
<form onsubmit="return CheckPostalCode(this)" method="post" action="/search/index.cshtml">
<input type="text" name="postalcode" id="postalcode" size="30" maxlength="5" required/>
<input type="submit" name="submit" value="go" />
</form>
The original method I tried to use was having a separte file called checkFields.js and including the file in the pages section head as such:
<script type="text/javascript" src="/js/checkFields.js"></script>
Where the webpage code is the same. Can anyone help explain why even when the script is in the same file its undefined. But really I would like to be able to call the function from another file. I've seen many tutorials that all say, you can call functions like normal so long as you include them. Well I thought I did.
When viewing page source it's simply the form with a header tag above it
If you are using #section head to include some raw javascript from your view, you need a RenderSection("head", false) in your _Layout.cshtml file ("head" is a name defined by yourself, you can change it to other name), in <head></head> part, like:
<head>
//your other css link or js link here
#RenderSection("head", false)
</head>
If you use link, try to use "~"
<script src="~/js/checkFields.js" type="text/javascript"></script>
Or use:
<script src='#Url.Content("~/js/checkFields.js")' type="text/javascript"></script>
See the source of http://marakana.com/s/post/1096/samples/try6.htm
It defines a function and calls it on load of document. (Which is the final step of this tutorial)
I tried to put it into a seperate JS file.
Runs correctly only if I call onload both in JS and in HTML.
But not only body onload or only from JS. I guess I am doing something wrong.
So, following works:
<head>
<script src="Scripts/makeWYSIWYG.js" type="text/javascript"/>
<script type="text/javascript">
window.onload = function () {
makeWYSIWYG(document.getElementById('editor'));
};
</script>
</head>
<body onload="makeWYSIWYG(document.getElementById('editor'));">
Why do I need to call the function twice?
I only have the function definition in "Scripts/makeWYSIWYG.js"
function makeWYSIWYG(editor) {
...
return editor;
};
Thanks,
There are no reason to call the function twice. The is enough.
With the first window.onload you could be changing a former function callback assignment (i.e. in a imported script).
The problem was actually the closing tag, "/>", here:
<script src="Scripts/makeWYSIWYG.js" type="text/javascript"/>
I should have written:
<script src="Scripts/makeWYSIWYG.js" type="text/javascript"> </script>
I guess the second script was helping the tag to be closed and making it run...
More info here: Why don't self-closing script tags work?
I'm learning JavaScript for a project, but I am stuck at the very beginning. I boiled it down, to the function in my script not being defined, but as near as I can tell it is defined.
I have a script: "script.js" with the function display result.
function displayResult()
{
document.write("hello world");
}
in the header of index.html I have this line
<script type="text/javascript" href="script.js"></script>
I have this line later
<body onload="displayResult()">
I have no idea why my function will not call. I would appreciate the help.
<script type="text/javascript" href="script.js"></script>
Should be:
<script type="text/javascript" src="script.js"></script>
there is no href attribute to a script block, its included from an external source through the src attribute.
BTW, calling document.write after the document has finished loading will first clear the entire content of the document, then replace it with whatever you pass to the call (in this case, 'hello world', which is not a valid HTML or XML document).