Jump to content
Sign in to follow this  
rgrisham

Functions in jscript

Recommended Posts

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

 

 

 

 

Share this post


Link to post
Share on other sites

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;}
  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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 by rgrisham

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

You can also put the older stable stuff in separate files and keep the new experimental stuff in the html file.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...