rgrisham Posted August 27, 2015 Share Posted August 27, 2015 Please forgive me, I'm new at this and old, so the going is slow. 1. If you place multiple functions in .js file, can a functions overwrite or negate other functions? If so, is there special designation that need to be placed in .js file. I'm having trouble with functions not working on the webpage like buttons not working correctly after adding a another function. (I'm not on a live webpage - just learning) 2. Are js files exclusively for functions? Can other things be placed in a .js file besides code that start with function because I've tried other things like example below and could not get them to work in the .js file. example: document.getElementById("bark").innerHTML ="The temperature is " + toCelsius(32) + " Centigrade"; I had to post that directly in to the body to work. This example is from the tutorial. Any help would be appreciated thanks Link to comment Share on other sites More sharing options...
davej Posted August 27, 2015 Share Posted August 27, 2015 Javascript is event-driven. You write functions and then assign them to handle various events. The initializing code can run immediately in the head or body or can be assigned to the window.onload event. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>h1{color:red;}</style><script src="myscript.js"></script></head><body><input type="text" id="in1"/><input type="button" id="btn1" value="Enter"/><div id="out1"></div></body> </html> myscript.js... 'use strict';window.onload = init;function init() {document.getElementById('btn1').onclick = put;}function put(){var value = document.getElementById('in1').value;document.getElementById('out1').innerHTML = '<h1>Temperature = '+ toCelsius(value) +'C</h1>';}function toCelsius(f){ var tf = Number(f); return 5*(tf-32)/9;} 1 Link to comment Share on other sites More sharing options...
rgrisham Posted August 27, 2015 Author Share Posted August 27, 2015 this is the html ( I would've saved this in the box like you but couldn't figure it out. <!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="Style.css"></head><body><h1>Howard Zinn</h1><p>A Peope History of the United States of America</p><p id="demo">A Paragraph.</p><script src="Jscript.js"></script><button type="button" onclick="myFunction()">Try it</button><p id="bark"></p><script>document.getElementById("bark").innerHTML ="The temperature is " + toCelsius(32) + " Centigrade";</script><br><button onclick="displayDate()">The time is?</button><p id="######"></p><br><br><p id="p1">Please find locate where 'locate' occurs!.</p><button onclick="myFunction()">Push it</button><p id="cat"></p></body></html> Here is the js.file function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }function toCelsius(fahrenheit) { return (5/9) * (fahrenheit+40);}function displayDate() { document.getElementById("######").innerHTML = Date();}function myFunction() { var str = document.getElementById("p1").innerHTML; var pos = str.indexOf("locate"); document.getElementById("cat").innerHTML = pos;} Does that help Link to comment Share on other sites More sharing options...
thescientist Posted August 27, 2015 Share Posted August 27, 2015 if you give two functions the same name, then the second one will clobber the first one. The solution to this is to give your functions meaningful names that describe what they do (typically using verbs) and keep them small and scoped to just one responsibility. 1 Link to comment Share on other sites More sharing options...
davej Posted August 27, 2015 Share Posted August 27, 2015 Another problem is this code, which is not inside a function... <script>document.getElementById("bark").innerHTML ="The temperature is " + toCelsius(32) + " Centigrade";</script> ...since it is not inside a function it is executed immediately when the page loads. 1 Link to comment Share on other sites More sharing options...
rgrisham Posted August 27, 2015 Author Share Posted August 27, 2015 (edited) Another problem is this code, which is not inside a function... <script>document.getElementById("bark").innerHTML ="The temperature is " + toCelsius(32) + " Centigrade";</script> ...since it is not inside a function it is executed immediately when the page loads. Here is code that was in the w3schools tutorial. How would you write it for a .js file? I thought you could just cut and paste this code directly into the .js file. I split them up into my with the function one in js file, and the other in the html body. I know that wrong, but I couldn't find another way to do it. I added the date and locate functions later.. as I had it things worked even though I knew it was bad code, but I was just interested in understand things first. Then clean it up later.. It wasn't until I added the locate function that things got really screwy, and I could not figure out how to correct it or function correctly. I have ran into a lot of little hiccups, but so far, I've figure them out. But, I figure getting the js files coded correctly will help me tremendously. JavaScript Functions section of the tutorial <script>document.getElementById("demo").innerHTML ="The temperature is " + toCelsius(32) + " Centigrade"; function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);}</script> Edited August 27, 2015 by rgrisham Link to comment Share on other sites More sharing options...
davej Posted August 27, 2015 Share Posted August 27, 2015 I myself am not a great fan of breaking a page up into .html .css and .js files. To me that simply increases the confusion factor. It is necessary for large projects but it is unnecessary for small examples. For the code you list above -- simply put it into a function that is called by the click event. <script>function displayTemp(){ document.getElementById("demo").innerHTML = "The temperature is " + toCelsius(32) + " Centigrade";}function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32);}</script> ...then add a button... <button onclick="displayTemp()">Convert Temperature</button> ...or you could use some other event to call the function. The available events are listed here... http://www.w3schools.com/jsref/dom_obj_event.asp 1 Link to comment Share on other sites More sharing options...
rgrisham Posted August 27, 2015 Author Share Posted August 27, 2015 Thanks, you've been very helpful. I am interested in creating js files, and understanding the process. I will considered your advice on smaller project because right now I'm just getting my feet wet. However, I did enjoy making the .css files for this project, which I've not listed here. I have several different projects and just recently hit a couple big snags. Again thanks Link to comment Share on other sites More sharing options...
Ingolme Posted August 27, 2015 Share Posted August 27, 2015 I prefer to start off separating HTML, CSS and Javascript simply because of scalability. When it's all in one place it's hard to distinguish one from another. 1 Link to comment Share on other sites More sharing options...
davej Posted August 27, 2015 Share Posted August 27, 2015 You can also put the older stable stuff in separate files and keep the new experimental stuff in the html file. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now