Moved inline javascript to external file - javascript

$('#<%=pnlCheckout.ClientID%> div.listitem').length am having this on my page level javascript I have to move this to external javascript file could anyone plz help me how to do this ?

Create a file called nameOfFile.js and copy your javascript code to it, without the <script> tags that surrounded it inline. Then load the external file into your main file using the <script> src attribute:
<script type="text/javascript" src="pathToFile.js"></script>

You could use the jQuery ends with selector here:
$('[id$="pnlCheckout"]')
Which will match any element for which the ID ends with pnlCheckout
Your final js would then be:
$('[id$="pnlCheckout"] div.listitem').length
related: jQuery Selector: Id Ends With?

Related

JavaScript addEventListener use external JavaScript file

So I have this page which is setup with a Bootstrap template.
What I would like to do is to use an external JavaScript-file as such: drive:\myfolder\mysubfolder\myexternaljavascriptfile.js. The <script> tag is located just before the </body> tag.
The Bootstrap-javafiles are in the <head> section. Also tried placing it in the <body> section.
So this is what I have now.
<script>
const element = document.getElementById("hitme");
element.addEventListener("click", myfunc);
</script>
also tried using myfunc() to no avail.
I want myfunc to use my external JavaScript file
It works if I use it in the same <script> tag in the HTML doc but that is not what I want.
Also, it does work if I use <button onclick("Myfunc")>Hit Me</button> but I reckon this is the old way using the click-event etc.
Put the js file in the same folder as your index.html file and link it to HTML with script tag <script href="script,js" defer><script> defer attribute load the js file after HTML CSS done loading

Why can't I execute JavaScript function inside the <script> tag that defines the .js source?

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.

What does handle_redirect() in JavaScript do?

What will happen if I click a XXX?
It seems I will be redirect to somewhere, but how does it determine where?
Somewhere in your JavaScript code, you should have a function that looks like this :
function handle_redirect() {
...
}
To find your JavaScript code, look for script tags, like this ...
<!-- INLINE JavaScript -->
<script type="text/javascript">
console.log("Inline JavaScript");
</script>
... or like this ...
<!-- an EXTERNAL external JavaScript file -->
<script type="text/javascript" src="assets/js/myscripts.js"></script>
If your handle_redirect function is defined inline, you should be able to find it just by searching for handle_redirect in the code of your webpage.
Usually, however, your JavaScript will be found in external JavaScript files. In that case, you need to search in the code of files that are linked to. So, if you see a script tag with a src eg. equal to assets/js/myscripts.js, just open the file assets/js/myscripts.js with your text editor OR your browser and look for a function that looks like function handle_redirect() { ... } there.

Is there a way to use javascript code without using <script> tag?

So I'm working on my online portfolio using prosite.com and I created some simple hover thingy using javascript (http://wojtek.szukszto.com/index.html). The problem is prosite.com won't allow me to use < script > tag... Is there any way to do it? Maybe as an external html? I don't know... I'm not really good in coding, so any help would be appreciated.
You can have them as DOM Events like
<div onclick="alert('cat');">
I <strong>Really</strong> want a cat!
</div>
<body onload="//you can put a whole bunch of stuff here"></body>
(It is equivalent to window.onload = function(){ //stuff })
You can put your javascript code into external file and call in the head section of your html document
<head>
<script src ="/JS/yourjsfile.js"></script>
</head>
hope that your host allows you to call JS in the head section
The way I do it is by stating the type of script. The ProSite already has javascript integrated within itself. I use:
<script type="javascript"> Code-Goes-Here </script>

Jquery - Linking external .js file not working

For some reason the external .js file I am linking to isn't working. I am linking to it like so:
<script src="jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
I have tested jquery using a simple inline script to hide a paragraph of text when it is clicked on so the jquery library is present and working.
The jquery.js file is in the same folder as the index.php file that is calling it.
What am I doing wrong?
This is the code I have in the external .js file currently just to test it is working(it isn't):
$("document").ready(function(){
$("p").click(function(){
$("p").css("color", "red");
});
});
Problem 1
It looks like jquery.js contains the code you wrote that depends on jQuery.
You need to load jQuery before you try to use it.
Swap the order of the <script> elements.
Problem 2
$("document") will wait for <document> elements to be ready. HTML doesn't have such a thing. Lose the quotes to pass in the document object directly.
Better yet, forget about the explicit call to ready and just
jQuery(function () { /* your function */ });

Categories