Click here to Skip to main content
15,888,351 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionGet Content of a Clicked Div in Iframe Pin
ASPnoob21-Nov-14 10:31
ASPnoob21-Nov-14 10:31 
AnswerRe: Get Content of a Clicked Div in Iframe Pin
Richard Deeming24-Nov-14 2:52
mveRichard Deeming24-Nov-14 2:52 
QuestionDisplay user Location on web app using GPS coordinates Pin
Member 1124572718-Nov-14 20:32
Member 1124572718-Nov-14 20:32 
AnswerRe: Display user Location on web app using GPS coordinates Pin
Anas R Firdousi9-Dec-14 14:37
Anas R Firdousi9-Dec-14 14:37 
QuestionTo Parse a URL Pin
Richard Andrew x6417-Nov-14 19:24
professionalRichard Andrew x6417-Nov-14 19:24 
AnswerRe: To Parse a URL Pin
Kornfeld Eliyahu Peter17-Nov-14 20:01
professionalKornfeld Eliyahu Peter17-Nov-14 20:01 
GeneralRe: To Parse a URL Pin
Richard Andrew x6417-Nov-14 20:10
professionalRichard Andrew x6417-Nov-14 20:10 
QuestionExternal .js file vs. script tags; how does it work? Pin
stevebrulerules17-Nov-14 12:34
stevebrulerules17-Nov-14 12:34 
Hello,

This is my first post to CodeProject. Please excuse if I commit some CodeProject "nono's," but point them out if you wish.

Anyways, I need help. I have only ever used <script> </script> in an html document to add functionality to a web page. But, I was recently given the task of implementing all of my JavaScript work from an outside .js file.

Here is what I know. I know I'll have to create and external .js file, and link it from my html. But what should it look like? I've never worked with raw JavaScript files before.

Here is my code:


HTML
<form name="myForm"> <!--calling the form a name allows the capturing and manipulating of user-entered values -->
	<fieldset id="inputs"> <!-- fieldset used to the effect of a container for CSS -->
    <ul> <!-- an unordered list is a great way to create text fields. Note that the default CSS inserts bullet points before the text field, a telltale sign of a list -->
	<li> 
    	<label for="principal"> Principal(p): </label>
        <input type="number" id="principal" name="principal" min="1" max="1,000,000"> <!-- "text" input type has the browser know that the user will...input text. An id and name are assigned along with type -->
    </li>
    
    <li>
    	<label for="intRate">  Yearly Interest Rate(r) (Enter as a decimal): </label>
        <input type="text" id="intRate" name="intRate" placeholder="0.00" min="0" max="1"> <!-- the user must type in a number in between the min and max values -->
    </li>
    
    <li>
    	<label for="length"> Loan Length(years): </label>
        <input type="number" id="length" name="length" min="1" max="100">
    </li>
    
    <li> 
    	<input id="clickme" type="button" value="Your Monthly Fate" onclick="loanPayment()"> <!-- creates a submit button, called "Flip the script!" Once clicked, the button will act-out the function storyTime() from the JavaScript in the head -->
     </li>
     </fieldset>
     
     <fieldset id="output">
     <li>
        <input type="text" id="result" name="result">
     
     </li>
     </fieldset> 
    
</ul>


A pretty standard form with some amateur comments. This all would normally go in the body of my html doc. Next, here's the function and variables within the <script> tags of the head:


JavaScript
<script>

	function loanPayment() //function to be actioned-out in the body on a button
	{
		
		var principal = document.getElementById("principal").value;
		var intRate = document.getElementById("intRate").value;        //calls the ids of the list items and gets their values
		var length = document.getElementById("length").value;
		
		var R = intRate/12; //Takes the interest rate and separates it for each month. The intRate must be expressed as a decimal. i.e. 6% = 0.06 
		var Y = length*12; //expresses the years of loan length in months -->
		
		var W = Math.pow((1+R),Y); //Takes the new variables R and Y and brings the value of 1+R to the power of Y -->
		//var z = Math.pow(x,y) is saying Z = x^y
		
		var F = (R * principal * W)/(W - 1); 
		F = F.toFixed(2); //rounds and expresses answer to two decimal places. 
		
		
		document.getElementById("result").value = "Monthly Fate = $" + F; //prints a generic string of text followed by the answer in a text field
	
	}

</script>


How would this form be implemented into an html web page through the use of an external .js file? I'm very new to html/css/JS and I want to get it right. Thank you all and please try to be as detailed as possible; what's common sense to you might not be to me.

AnswerRe: External .js file vs. script tags; how does it work? Pin
Peter Leow17-Nov-14 14:06
professionalPeter Leow17-Nov-14 14:06 
Questionfirefox addon. required(sdk/tabs).attach() not working Pin
alborozd17-Nov-14 4:45
alborozd17-Nov-14 4:45 
AnswerRe: firefox addon. required(sdk/tabs).attach() not working Pin
ZurdoDev17-Nov-14 5:23
professionalZurdoDev17-Nov-14 5:23 
QuestionCode Modify for JS Pin
Member 1123853816-Nov-14 13:05
Member 1123853816-Nov-14 13:05 
AnswerRe: Code Modify for JS Pin
Richard MacCutchan16-Nov-14 21:39
mveRichard MacCutchan16-Nov-14 21:39 
QuestionRe: Code Modify for JS Pin
ZurdoDev17-Nov-14 5:24
professionalZurdoDev17-Nov-14 5:24 
QuestionHow to Create HTML Code in PDF Article? Pin
hub sarasota11-Nov-14 19:12
hub sarasota11-Nov-14 19:12 
QuestionSetting the content of an HTML span text to the text of an asp textbox text properity Pin
Stephen Holdorf9-Nov-14 10:04
Stephen Holdorf9-Nov-14 10:04 
AnswerRe: Setting the content of an HTML span text to the text of an asp textbox text properity Pin
Richard Deeming10-Nov-14 4:36
mveRichard Deeming10-Nov-14 4:36 
Questionissue with IE11 via Jquery/Ajax Pin
Rajendra Kumar Katabathuni6-Nov-14 21:14
Rajendra Kumar Katabathuni6-Nov-14 21:14 
AnswerRe: issue with IE11 via Jquery/Ajax Pin
Nathan Minier14-Nov-14 2:09
professionalNathan Minier14-Nov-14 2:09 
Questioncompare two array object and remove duplicate using underscore.js Pin
sagivasan6-Nov-14 2:09
sagivasan6-Nov-14 2:09 
SuggestionRe: compare two array object and remove duplicate using underscore.js Pin
ZurdoDev13-Nov-14 10:26
professionalZurdoDev13-Nov-14 10:26 
Questionjava Pin
Member 112115035-Nov-14 23:44
Member 112115035-Nov-14 23:44 
QuestionRe: java Pin
Richard MacCutchan6-Nov-14 0:02
mveRichard MacCutchan6-Nov-14 0:02 
QuestionOpening VLC player from browser Pin
Danpeking5-Nov-14 22:30
Danpeking5-Nov-14 22:30 
QuestionWhat's the best programming language to build this? Pin
beMember5-Nov-14 9:26
beMember5-Nov-14 9:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.