Hey all can you please help me get started with my first java script program. I just don't know where to get started? Do I start defining my variables first? try and work out my logic through functions first? Thanks <div id="player"> <div id="currentscore"></div> <div id="value"><input type="text" class="value" value="" style="width:140px; height:45px;"></div> <div id="update"><p>UPDATE</p></div> </div> <script src="myscript.js"></script> </body> Code (markup): var newScorePara = document.createElement("p"); var valueText = document.createTextNode("100,000"); newScorePara.appendChild(valueText); document.getElementById("currentscore").appendChild(newScorePara); Code (markup):
I am not sure what are u trying to do. But i can tell u few points. Your HTML code seems ok, except putting the js part inside the body. It is always better to write the js inside the HTML head tag. And call the code from your body tag using event functions. Here the function needs to be called on the onClick event of the 'update' div. For the js part, i think you might not need to create any new elements (unless you specifically need them). You can change a div's content using the html attribute. eg: document.getElementById("currentscore").html = 'some value';
Hey thanks for the reply. Here is an update on what I have, not to much different. <!DOCTYPE HTML> <html> <head> <title>Score Board</title> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <script src="myscript.js"></script> </head> <body> <div id="player"> <div id="currentscore"><p id="updatedScore"></p></div> <div id="valuecontainer"><input type="text" id="value" style="width:140px; height:45px;"></div> <div id="update" onclick="updateValue()"><p>UPDATE</p></div> </div> </body> </html> Code (markup): function updateValue(){ document.getElementById("updatedScore").innerHTML = document.getElementById("value").value; } Code (markup): For now, all I would like to do is create an if statement to check weather "value" isNaN, if it is a number, add or subtract it from the current number displayed inside the updatedScore p.
You can use the inuilt javascript isNaN function for that. The function returns true if the argument is not a number. It also supports negative and decimal values. if (!isNaN(document.getElementById("value").value)) { document.getElementById("updatedScore").value = parseFloat(document.getElementById("updatedScore").value) + parseFloat(document.getElementById("value").value); } Code (markup):
Try this, it seems its a problem with using the paragraph (<p>) tag. The below code works fine for me. <html> <head> <title>Score Board</title> <script language="javascript"> function updateValue() { var temp = 0; if (document.getElementById("scoreCard").value == '') { temp = 0; } else { temp = parseFloat(document.getElementById("scoreCard").value); } if (!isNaN(document.getElementById("value").value)) { var sum = parseFloat(document.getElementById("value").value) + temp; document.getElementById("scoreCard").value = sum; } } </script> </head> <body> <div id="player"> <div id="currentscore"><input type="text" id="scoreCard"></p></div> <div id="valuecontainer"><input type="text" id="value" style="width:140px; height:45px;"></div> <input type="button" value="update" onclick="updateValue()"/> </div> </body> </html> Code (markup):
Thank you very much, you got me started in the perfect direction. The next thing I will try to resolve is how to actually hold the data, so that when my friends and I are at the webpage separately, the numbers will store and update live and permanently..
If you want data to be saved locally, you could try `localStorage`. `localStorage` is persistent but not permanent. When the user clears private data, `localStorage` may be cleared as well. https://developer.mozilla.org/en/DOM/Storage If you want live updates over the Internet, then you will need a server.
It is best practice to put the scripts at the bottom of the body. You want to parse the content as fast as possible and then handle the behavior. See: Where is the best place to put <script> tags in HTML markup?: stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup How does the location of a script tag in a page affect a JavaScript function that is defined in it?: stackoverflow.com/questions/496646/how-does-the-location-of-a-script-tag-in-a-page-affect-a-javascript-function-tha
It is better to save the value `document.getElementById("scoreCard").value` or the object `document.getElementById("scoreCard")` into a variable. You can reduce the number of times you call `getElementById`, and instead of having very long `document.getElementById("scoreCard").value`s all over the place, the shorter variable name makes it easier to read. It also best practice to decouple behavior and presentation from content. Storing JavaScript and CSS in HTML attributes (`onclick="updateValue()"` / `style="width:140px; height:45px;"`) is bad, old style. For JavaScript, you should attach event handlers instead. For CSS, you should define rules and store them separately from the body.
That was a new info for me. Personally i like to keep the js in the head tag as it seems cleaner and shows a separation between form elements and the script logic. I think i can use what you have said for my blog, where i am using prettify.js for code display.
May I suggest you look into Jquery. Its a very nice library that simplifies a bunch of javascript coding.