JavaScript code I am trying to get to call from the HTML.
var ClassList = new Array ["Bio1300","csci12"];
function ClassMenu(ClassList) {
return (ClassList.toString);
};
This is the HTML code I am trying to call the JavaScript function inside of on the load of the page.
<li>
<script type="text/javascript" src="JavaScript InProg.js">
function ClassMenu() {
console.log(ClassList.toString);
}
</script>
</li>
Please help. I have many other functions I am trying to call in this manner that are both arrays and contain mathematical calculations.
There are a few issues with the code snippet you've provided. Firstly, it's considered a best practice to add your <script> tags inside the <head> of the document or at the end of the document when loading JavaScript files. Secondly, your source reference is incorrect. Assuming the JavaScript file InProg.js is at the same directory level as your HTML file, you could change your script link to something like this:
<script src="InProg.js"></script>
Once you've ammended how you're loading the JavaScript file into your page, you can simply make a call to the function inside another <script> tag from anywhere on the page, like so:
<script>ClassMenu(params);</script>
Also, I'd recommend adding the console.log statement to the function you're calling.
Hopefully this helps.
Related
I am just starting to learn some programming for the first time and had a question I was hoping someone could help with, hopefully nothing too obvious I am missing.
(Revised Explanation Including Code Samples)
I am using a button to change the inner-html of an element, but I am trying to do the same thing in three ways. For the first way, I can do it. For the second two, I am having trouble and was looking for guidance:
First way I am doing is changing the innerhtml of a paragraph element, by clicking a button that has a statement defined directly behind the onclick event attribute for the button. This is working, code I use can be seen below:
<p id="change1">Does the button below change my text when I click it, based on entering a js function directly behind an onclick event entered as a button attribute?</p>
<button type="button" onclick="document.getElementById('change1').innerHTML = 'Yes_1'">See If It Works_1</button>
Second way I am trying to do this is by using a button that calls a function I defined within a script tag in my html file. The function I defined is supposed to perform the task of changing the innerhtml of the paragraph element I defined. This is not working, code sample can be seen below:
<p id="change2">Does the button below change my text when I click it, based on calling A Function Defined in script tag within My HTML File on with an onclick event?</p>
<button type="button" onclick="internalfunction()">See If It Works_2</button>
<script>
function internalfunction() {
document.getElementById("change2").innterHTML = "Yes_2";
}
</script>
Third way I am trying to do this is the same as the second way, only instead of calling a function defined within a script tag in my HTML file, I am calling one I defined in an external js file. This file however sits in the same directory as my HTML file on my computer. This was is also not working right now. Sample of my code, and the way I linked to the js file can be seen below:
Here is the code in my HTML file:
<p id="change3">Does This Button That Calls A Function Defined in My External JS File Work?</p>
<button onclick="externalfunction">See If It Works_3</button>
here is the function I want to call in my external js file:
function externalfunction(){document.getElementById("change3").innerHTML="Yes_3"};
here is the way I linked to my js file, entering this within the head of the html file:
<script src="javascript.js"></script>
Per some help on the help on the comments and some more review this was confirmed a typo issue where () were omitted to call a function and innerHTML had been misspelled.
Current variant looks like that (I tried solution offered here: Can't append <script> element):
var s=document.createElement("script");
s.type="text/javascript";
s.src="js/properties.js";
$("head").append(s);
Previous variant was:
$("head").append($('<script type="text/javascript" src="js/properties.js"></script>'));
And both of them don't work. "properties.js" is also in "js" folder, but if I remove this part of path, it doesn't change anything.
I also tried to use ' instead " and check addBlock: I had it installed, but it's disabled on this page.
Changing "append" function to "appendChild" also didn't help.
"properties.js" contains just one line:
var PREFIX_URL = "http://localhost:8080/app-rest-1.0.0-SNAPSHOT";
And firstly I declare it in "main.js" to which I, in fact, try to connect this file.
Explain, please, what I'm doing wrong.
Add all your <script> tags right before the closing </body> tag, because when the browser encounters a <script> tag it begins downloading it and stops rendering of the page. So by placing them at the bottom of the page you make sure your page is fully loaded before trying to interact with the DOM elements. Also $("head") returns an array of all the <head> tags. You should also enclose your calls in a $(document).ready() function.
<!-- Your html tags here -->
<script type="text/javascript">
$(document).ready(function(){
var s=document.createElement("script");
s.type="text/javascript";
s.src="js/properties.js";
$("head")[0].append(s);
});
</script>
</body>
I made JSBin example. You can see in console that last script tag is the one you need. So the your code is correct.
If your IDE don't highlight 'var' - it may be error not in javascript. You can place it in a wrong place for example.
Can you provide link to a gist (or pastie.org or smth) for us to better understand your problem.
P.S. The code $("head")[0].append gives me undefined ( note to previous answer)
I'm fairly new to the whole JQuery/javascript world, but I've managed to wack together a working jqgrid with a datepicker & custom control (used jquery auto complete) based on code samples i found on the net. I've added the code to a T4 template in my project as it'll probably act as a base/starting point for most pages. (Side note. I'm using asp.net MVC)
JFIDDLE: LINK
1.) I'd like to move the initDateEdit & initDateSearch to the same function (using a parameter, to disable/enable the showOn property) as they are basically similar.
2.) How would be the best way to set nonWorkingDates from outside the new function/file. same applies to the autocomplete_element (I'd like to specify the url)
Changing
"function nonWorkingDates(date)" to => "function nonWorkingDates(date, nonWorkingDates)"
isn't working, (guess it's got got something to do with how its gets called "beforeShowDay: nonWorkingDates")
Thanks in advance!
If you have a chunk of JS code like this:
<script type="text/javascript">
... code goes here ...
</script>
You simply copy the whole thing, eliminate the containing script tags, and save the raw code
... code goes here ...
to a file, which you then include with:
<script type="text/javascript" src="yourfile.js"></script>
However, since you're using jquery, you'll have to make sure that this above snippet is placed AFTER the script tag that loads up jquery, or you'll get a "no such function" syntax error.
I compile all my javascript for different pages into one file, so I have to identify page for my all.js. I can put a hidden element in my pages and let javascript detect this element, but I don't like this solution, are there any other ways to do this?
You could go by the url using location.href (or another field from the location object).
However, a better approach is using a data- attribute on the body tag, e.g. <body data-page="whatever"> and then using $('body').data('page') to retrieve the value.
If you script is based on pages, then compiling them into one script is a bad idea, load the file separately, it will be lighter and definately increase some performace.
I am not sure, why do you need this, but in general it is not good practice to change dynamicaly change content of javascript file, since you are disabling javascript cacheing, what can be performance issue later.
Any way, you can solve it from other side, what about using all.js just to detect the page, where are you and then you can use this information, to load right javascript file dynamicaly, like in the following example
document.write('<script src="'+location.pathname+'.js"></script>');
Which will load same file as you are on, just with .js extension. So for example on index.html page it will load index.html.js file
I almost always use MVC frameworks and tend to put my action and controller as classes on the body element
<body class="main_controller index">
Which lets you do things like this:
$(document).ready(function(){
//Only for lessons#search
if (!$(body).hasClass('lessons search')) {
return;
}
function close_style_filter_box() {
$('#style_filter_box').slideUp();
}
});
$(document).ready(function(){
//Only for main_controller#index
if (!$(body).hasClass('main_controller index')) {
return;
}
function do_something_else_on_this_age() {
....
}
});
Another way is using javascript variable:
var PAGE = 'page1';
I've been reading a tutorial called Adding SQL Database support to your iPhone App(I use PhoneGap because I won't get on Objective-C), I've done that all, but now when I tried to display the result(celebsDataHandler) like this it shows nothing:
<script type="text/javascript" charset="utf-8" src="db.js"></script>
<script type="text/javascript" charset="utf-8">
document.write(celebsDataHandler);
</script>
What should I do to correct this problem?
celebsDataHandler appears to be a function, based on what the tutorial says. You can't document.write a function.
Have you tried using a more versatile command like console.log to see what the value of celebsDataHandler is?
Or, you may wish to change the last line of the function from
alert(html);
to
return html;
First, you need to have some part of your document set up to handle showing the celebrities, for this example. Make sure you have a DOM element in your HTML page that has an ID that you can reference, for example:
<div id="myCelebs"></div>
Next, change the last line of the celebsDataHandler function to:
document.getElementById('myCelebs').innerHTML = html;
Finally, in your inline script, change your document.write call to:
loadCelebs();
To recap what is going on:
The loadCelebs function contains the SQLite code that queries the database and retrieves your data. It references a callback function (in this case named celebsDataHandler) that is invoked once the data is ready to be parsed.
The celebsDataHandler callback function iterates over results and compiles celebrity data into HTML - which it then injects into the "myCelebs" DOM element.
Hope that helps.