JavaScript - Creating A Result Sheet Using Javascript
I run a website for a skittle league and am looking to create a form to allow teams to sumbit results on line.
I'm not an expert on Javascript, the code I've created so far allows the user to enter the player name and score for one team and calcutate the total. However, I'm having problems duplicating this for a second team, and would like to remove the Get Total button (i.e. Auto Calculate total). Can anyone advise how I can do this. The Code I have so far is <html> <head> <script type="text/javascript" language="javascript"> function getTotalH1(oForm) { var field, i = 0, total = 0, els = oForm.elements; var fieldnames = ['PSH1' , 'PSH2' , 'PSH3' , 'PSH4' , 'PSH5']; for (i; i < fieldnames.length; ++i) { field = els[fieldnames[i]]; if (field.value != '' && isNaN(field.value)) { alert('Please enter a valid number here.') field.focus(); field.select(); return ''; } else total += Number(field.value); } return ' ' + total; } </script> </head> <body> <form> <div align="center"><table border="0" cellpadding="2" cellspacing="0" width="305"> <col width="250" align="left"> <col width="42" align="center"> <tr> <td><input type="text" name="PNH1" size="35"> </td> <td><input id="PSH1" type="text" name="PSH1" value="" size="4"></td> </tr> <tr> <td><input type="text" name="PNH2" size="35"></td> <td><input id="PSH2" type="text" name="PSH2" value="" size="4"></td> </tr> <tr> <td><input type="text" name="PNH3" size="35"></td> <td><input id="PSH3" type="text" name="PSH3" value="" size="4"></td> </tr> <tr> <td><input type="text" name="PNH4" size="35"></td> <td><input id="PSH4" type="text" name="PSH4" value="" size="4"></td> </tr> <tr> <td><input type="text" name="PNH5" size="35"></td> <td><input id="PSH5" type="text" name="PSH5" value="" size="4"></td> </tr> <tr> <td><input type="button" value="Get Total" onclick="total.value=getTotalH1(this.form)" /> <input type="reset" /></td> <td><input id="total" type="text" name="totalh1" value="" readonly="readonly" size="4"></td> </tr> </table></div> <br><br> </form> </body> </html> thanks Similar TutorialsI have been asked by a friend to create a math sheet generator for their child, however i don't have a clue where to start with javascript. Similar to this.. http://cemc2.math.uwaterloo.ca/mathf...sheetgen.shtml It doesn't need to be advanced as that as all i'm looking for is how to create the sums. If someone could help either by informing me where to start or even an online tutorial i would be extremely greatful! Many thanks, James Good Day, I am very new to JavaScript and I am working on an assignment that is almost finished, but I have a problem getting the result to work. When I enter the two values and then hit submit, nothing is returned. I am guessing that either my code is incorrect or I have used the wrong ids maybe. Basically, the user enters 2 parameters (hourly wage and hours worked) and the first function turns the parameters into the gross pay (depends on if the hours are standard pay or if overtime is involved). The second function takes the gross pay and does the tax amounts for local, state and federal. Then it adds all taxes to give a total of tax amount paid. The input for the parameters is done by <input> tag. The return reslut is supposed to be just the number which is the total amount of taxes to be taken out. This all has to be done by <input> tags. Could someone look over the html and JS and help me find where the problem is at. The instructor said we could use ? : operator for determining the pay rates, but I found it easier to do if/else staements because I was not sure how you would script that. Any help would be great. Thanks HTML Code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Calculate Tax Amount</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="calculateGross.js"></script> <script type="text/javascript" src="calculateTax.js"></script> </head> <body> <table width="60%" border="0" cellpadding="0" cellspacing="2" align="center" class="view"> <tr> <td colspan="3" class="textview">Calculate the gross pay:</td> </tr> <tr> <td class="labeltext">Pay rate(dollars per hour)</td> <td>:</td> <td><input type="text" name="payrate" id="payrate" class="textval"></td> </tr> <tr> <td class="labeltext">Hours worked</td> <td>:</td> <td><input type="text" name="hours" id="hours" class="textval"></td> </tr> <tr> <td colspan="3" align="center"><input type="button" name="" value="Submit" onclick="return calculate(); "> </td> </tr> </table> <br> <br> <table width="60%" border="0" cellpadding="0" cellspacing="2" align="center" class="view"> <tr> <td colspan="3" class="textview">Total Tax Paid:</td> <tr> </tr> <td class="labeltext">Grand Total of Taxes</td> <td>:</td> <td><input type="text" name="total" id="totalTax" class="textval" disabled="disabled"></td> </tr> </table> </body> </html> First Function JS Code: function calculate() { var payRate = document.getElementById("payrate").value; var hoursWorked = document.getElementById("hours").value; var oTime; var oPay; var oHour; var grossPay; if(hoursWorked > 40) { oTime = Number ( hoursWorked ) - 40; oPay = Number ( ( payRate ) * 1.5 ) * oTime; oHour = Number ( hoursWorked )- Number ( oTime ); grossPay = Number ( payRate ) * Number ( oHour ) + Number ( oPay ); } else grossPay = Number ( hoursWorked ) * Number ( payRate ); } The second function JS Code: function calculateTax(gross) { var gross; var localTax; var localTaxBal; var stateTax; var stateTaxBal; var fedTax; var fedTaxBal; var totalTax; localTax = Number ( gross ) * 2/100; localTaxBal = Number ( gross ) - Number ( localTax ); stateTax = Number ( localTaxBal ) * 8/100; stateTaxBal = Number ( localTaxBal ) - Number ( stateTax ); fedTax = Number ( stateTaxBal ) * 31/100; fedTaxBal = Number ( stateTaxBal ) - Number ( FedTax ); totalTax = Number ( localTax.toFixed(2) ) + Number ( stateTax.toFixed(2) ) + Number ( fedTax.toFixed(2) ); return totalTax.toFixed(2); } using a javascript function to determine if a string is all digits or not and return result based off the decision. if it is all digits, mask all digits except the first two, if not all digits just return the string. these are the snippets however i am not seeing anything returned in the column Code: <script > var start = function RenderRC(CodeOwner) { var Rcode = CodeOwner.toString(); var pattern = new RegExp("^\d{2,}$ "); if (Rcode.match(pattern)) { if (Rcode.length > 2) { var newcode = Rcode.substr(0, 2) + Array(Rcode.length - 2 + 1).join("*"); return newcode; } } else { return Rcode; } }; </script> <ext:RecordField Name="CodeOwner" /> <ext:Column Header="<%$ Resources:Text, CodeOwner %>"DataIndex="CodeOwner" Width="110" > <Renderer Fn ="start" /> </ext:Column> Hi guys, I have a simple calculator on my website which has a few options selectable by radio buttons. When the user adds selections - the total price of their order is automatically calculated and displayed in a <div> for them to see. The client then can deselect options or add according to their budget. The code which deals with this is as follows (just sections of it but you get the point ....) In the <HEAD> Code: <script type = "text/javascript"> var allprices = []; var index = 0; function chkrads(frmName,rbGroupName) { var chosen = ""; var radios = document[frmName].elements[rbGroupName]; for (var i=0; i <radios.length; i++) { if (radios[i].checked) { chosen = radios[i].value; } } if (chosen == 0) {printprice = 0} if (chosen == 1) {printprice = 99} if (chosen == 2) {printprice = 150} if (chosen == 3) {printprice = 250} if (chosen == 21) {printprice = 200} if (chosen == 22) {printprice = 300} if (chosen == 30) {printprice = 50} if (chosen == 41) {printprice = 50} if (chosen == 42) {printprice = 70} if (chosen == 43) {printprice = 90} if (rbGroupName == "size") {index = 0} if (rbGroupName == "colour") {index = 1} if (rbGroupName == "frame") {index = 2} if (rbGroupName == "glass") {index = 3} if (rbGroupName == "hook") {index = 4} if (rbGroupName == "delivery") {index = 5} allprices[index] = printprice; var totalprice = 0; for (var i =0; i <allprices.length; i++) { if (!isNaN(allprices[i])) { totalprice = totalprice + allprices[i]; } } document.getElementById("result").style.display = "block"; document.getElementById("result").innerHTML = totalprice; } </script> Then in the <BODY> Code: <form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;"> <input type = "radio" name = "size" value = "0" onclick = "chkrads('myform', 'size')"> <b>0</b> <input type = "radio" name = "size" value = "1" onclick = "chkrads('myform', 'size')"> <b>1</b> <input type = "radio" name = "size" value = "2" onclick = "chkrads('myform', 'size')"> <b>2</b> <input type = "radio" name = "size" value = "3" onclick = "chkrads('myform', 'size')"> <b>3</b> <br /><br /><br /><br /> <input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b> <input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b> <input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform', 'colour')"><b>Multi Colour</b> <br /><br /><br /><br /> <input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')"><b>No</b> <input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b> <br /><br /><br /><br /> <input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b> <input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform', 'glass')"><b>Yes</b> <br /><br /><br /><br /> <input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')"><b>0</b> <input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')"><b>1</b> <input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')"><b>2</b> <input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')"><b>3</b> <br /><br /><br /><br /> <input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform', 'delivery')"><b>No</b> <input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform', 'delivery')"><b>Yes</b> </form> This all calculates the cost and then supplies the answer into this code: Code: <div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div> This all works exactly as I want - my question is this .... I have added an HTML contact form at the bottom of the page which goes off to a Form2Email PHP script. (All working fine) I really want to autofill one of the sections of this form "QUOTED PRICE" with the value calculated by my earlier product calculator. The form looks like so: Code: <form id="ContactForm" method="post" action="FormToEmail.php" class="input2"> <label>Name: <input name="name" type="text" id="name" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label>QUOTED PRICE: <input name="QUOTED PRICE" type="text" id="QUOTED PRICE" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label> <input type="submit" class="submit" name="submit" id="submit" value="submit"/> </label> </form> Does anyone know how to achieve this?! It would be a massive help! Below is a javascript function from my website that loops through nodes in an XML file retrieving certain information about those who joined in the current month/year. The part in red creates a link which when clicked runs a function called show() with the relevant i variable value e.g. show(2) for the second node if that is relevant. Anyway the red part works in Chrome but not Internet Explorer (surprise surprise). I did some research which says that .setattribute is not allowed in IE. How can I change the red code to create links for the relevant records which works in IE? Thank you for your help Code: function displaymember() { var d = new Date(); var curr_month = d.getMonth(); curr_month++; if (curr_month < 10) curr_month = "0" + curr_month; var curr_year = d.getFullYear(); for (i = 0; i < x.length; i++) { membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue); name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue); body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue); ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue); sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue); seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue); date = (x[i].getElementsByTagName("date_joined")[0]); month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue); year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue); newa = document.createElement("a"); aIdName = "my" + i + "a"; ahref = "#"; aclick = "show(" + i + ")"; newa.setAttribute("id", aIdName); newa.setAttribute("href", ahref); newa.setAttribute("onclick", aclick); newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " with " + membershipstatus + " membership seeks " + seeking + "<br/>"; if (curr_month == month && curr_year == year) { document.getElementById("member").appendChild(newa); } } } I basically have a property website with different types of properties, e.g. detached houses, semi detached houses. and I want to create a filter so when you click 'detached houses' only detached houses are shown. Is there any tutorials you can point me to, would be appreciated. This is what i have so far.. Code: <div id="main"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><div id="filter"><p class="houses" style="font-family:helvetica;color:#0155a1;font-size:14px;background:url(cutouts/forsale/filter.jpg) no-repeat;"><b><u>Houses</u></b> <br /> <span class="dh"><b><u>Detached Houses</u></b></span> <br /> <span class="dh"><b><u>Semi-detached houses</u></b></span> <br /> <span class="dh"><b><u>Terraced houses</u></b></span> <br /> <br /> <b><u>Flats / Apartments</u></b> </p></div></td> <td><div id="info1"><a href="#"><img src="cutouts/forsale/pinfo1.jpg" alt=""/></a></div></td> </tr> </table> <div id="info2"><a href="#"><img src="cutouts/forsale/pinfo2.jpg" alt=""/></a></div> <div id="info3"><a href="#"><img src="cutouts/forsale/pinfo3.jpg" alt=""/></a></div> <div id="info4"><a href="#"><img src="cutouts/forsale/pinfo4.jpg" alt=""/></a></div> <script type="text/javascript"> var properties = {$properties_json}; // very simple getter method that uses a single key-value pair. var selectProperties(k, v) { var rv = []; for (var i in properties) { if (properties[i][k] == v) { rv.push(properties[i]); } } return rv; } // selectProperties() </script> </div> Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Overlay test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #overlay { background-color: #ccffcc; display: none; margin-left: -400px; position: absolute; top: -250px; left: 50%; width: 800px; height: 500px; visibility: visible } #container{ color: white; background-color: #0ff; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; overflow: visible; visibility: visible; display: block } </style> <script type="text/javascript" src="swfobject/swfobject.js"></script> <script type="text/javascript"> //<![CDATA[ function hide() { document.getElementById("overlay").style.display = "none"; } function show() { document.getElementById("overlay").style.display = "block"; swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf"); } //]]> </script> </head> <body> <div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div> <a href="#" onclick="hide();">Click me</a> to close.</div></div> <div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div> </body> </html> I got some of this code from these forums. Thank you. It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions. How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser.. Thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Project 2 </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="en-us" /> <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" /> <script type="text/javascript"> /* <![CDATA[ */ function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert("You must enter a numeric value!"); return false; } return true; } function calculate() var shipping = 0; var total = 0; { if (document.forms[0].hand_tool.value != document.forms[0].hand_tool.value == true) (document.forms[0]item1.value == 20); { && document.forms[0].shipping.value == (shipping + 5); { && (document.forms[0].total.value = document.forms[0].hand_tool.value + document.forms[0].shipping.value) } } function confirmSubmit() { if (document.forms[0].first_name.value = "null") { window.alert("You have not entered the requested Customer Information."); return false; } else if (document.forms[0].last_name.value = "none" || document.forms[0].city.value = "" || document.forms[0].state.value = "none") { window.alert("You have not entered the requested Customer Information."); return false; } var pmntMethod = false for (var j=0; j<3; ++j) { if (document.forms[0].credit_card[j].checked == true) { pmntMethod = true; break; } } if (pmntMethod != true) { window.alert("You must select a method of payment."); return false; } return true; } function confirmReset() { var resetForm = window.confirm("Are you sure you want to reset the form?"); if (resetForm == true) return true; return false; } /* ]]> */ </script> </head> <body> <!-- Your XHTML here --> <h1>Purchase Order</h1> <form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();"> <h3>Products</h3> <table> <tr> <td> <p>Hand Tools <br />$20.00<img src="handtools.gif" alt="Hand Tools" class="img" /></p> </td> <td> <select name="hand_tool" size="1"> <option value="hand_tool">Hand Tool</option> <option value="saw">Saw</option> <option value="hammer">Hammer</option> <option value="screwdriver">Screwdriver</option> <option value="wrench">Wrench</option> <option value="pliers">Pliers</option> </select> </td> <td> <p>Power Tools <br />$30.00<img src="powertools.gif" alt="Power Tools" class="img" /></p> </td> <td> <select name="power_tool" size="1"> <option value="power_tool">Power Tool</option> <option value="circular_saw">Circular Saw</option> <option value="sabre_saw">Sabre Saw</option> <option value="drill">Drill</option> <option value="belt_sander">Belt Sander</option> <option value="table_saw">Table Saw</option> </select> </td> </tr> </table> <h3>Shipping Fees</h3> <table> <tr> <td>Item 1: <input type="text" name="item1" value="" onchange="calculate();" /></td> <td>Item 2: <input type="text" name="itme2" value="" onchange="calculate()" /></td> </tr> <tr> <td>Shipping: <input type="text" name="shipping" value="" /></td> <td>Total: <input type="text" name="total" value="" /></td> </tr> </table> <h3>Customer Information</h3> <p>First Name <input type="text" name="first_name" value="FirstName" onclick="document.forms[0].first_name.value = '';" onchange="confirmSubmit();"/> Last Name <input type="text" name="last_name" value="LastName" onclick="document.forms[0].last_name.value = '';" onchange="confirmSubmit();" /></p> <p>Street Address 1 <input type="text" name="address1" value="Address1" onclick="document.forms[0].address1.value = '';" onchange="confirmSubmit();" /></p> <p>City <input type="text" name="city" value="City" onclick="document.forms[0].city.value = '';" onchange="confirmSubmit();" /> State <input type="text" name="state" value="State" onclick="document.forms[0].state.value = '';" onchange="confirmSubmit();" /> Zip <input type="text" name="zip" value="Zip" onchange="return checkForNumber(this.value);" onclick="document.forms[0].zip.value = '';" /></p> <p>Phone <input type="text" name="phone" value="Phone" onchange="return checkForNumber(this.value);" onclick="document.forms[0].phone.value = '';" /> Fax <input type="text" name="fax" value="Fax" onclick="document.forms[0].fax.value = '';" onchange="return checkForNumber(this.value);" /></p> <p>Payment Method? <input type="radio" name="credit_card" />Visa <input type="radio" name="credit_card" />MasterCard <input type="radio" name="credit_card" />American Express</p> <p>Credit Card Number<input type="text" name="cardNumber" value="CardNumber" size="50" onclick="document.forms[0].cardNumber.value = '';" onchange="return checkForNumber(this.value);" /></p> <table> <tr> <td> <p>Expiration Month</p> </td> <td> <select name="month" size="1" style="width: 200px"> <option value="months">Month</option> <option value="january">January</option> <option value="february">February</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select> </td> <td> <p>Expiration Year</p> </td> <td> <select name="expiration" size="1"> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select> </td> </tr> </table> <p><input type="image" alt="Graphical image of a submit button" src="submit.gif" onchange="confirmSubmit()" /></p> <p><input type="reset" value="Reset Purchase Order Form" onchange="confirmReset();" /></p> </form> <!-- your XHTML validation icon--> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" style="border: 0px;" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img src="http://www.austincc.edu/jscholl/images/vcss.png" alt="Valid CSS!" height="31" width="88" style="border: 0px;" /></a> </p> </body> </html> I am working with an InDesign CS3 document, with multiple books, and what I want to do is search for a string and turn that string or some how attach an InDesign Hyperlink object to that string. I can find the string using the findText() method var myFoundItems = app.documents.item(0).findText(); And it is returned as a TextStyleRange with its parent being a Story object. What I'm having trouble with is either replacing or attaching a Hyperlink object to string or TextStyleRange. Hyperlink objects to not have a contructor so I don't know how to instantiate a new one and once I get a new one created and the fields populated I don't know how to replace or attach the Hyperlink to that TextStyleRange. I am creating a cookie that increases a "value" or "integer" by 1 (ie Y+1) every time any page inside my webpage. Any webpage that i put the code into. right now I need it so that when you visit a page with the code it increases the variable or "cookie" (Y) by 1. when Y reaches a certain number, I.E 10, it resets Y to "0" and redirects you to a URL. Please explain where each value would go in any replies. Please make code as simple and as low in file size as possible. I don't need any sort of flexibility, just a simple redirect to a webpage which WILL NOT have the cookie code in it. EX: when opening the menu of an iPod game it asks you to rate the game, saying remind me later resets the value to "0" and saying rate now, resets to "0" but does not keep counting on the next page. Thanks to all in advance and i hope you completely understood my problem and question! [spoiler] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript"> function checkValue() String Y Y=Y+1 if(Y > 9){ alert(Y)} else{ alert(Y)} </script> </head> <body> <form action="Javascript:checkValue()" > <div align="center"> <input name="Logon" type="submit" value="Click Me"/> </div> <script type="text/javascript"> function checkValue() String Y; Y=Y+1; alert(Y); //if(Y > 9){ //alert(Y)} //else{ //alert(Y)} </script> </form> </body> </html> [/spoiler] I did not expect any of the above code to work, completely providing a new code will not surprise me or be a problem. Thanks again in advance! Greetings all, I need someone to help me out with this code for a project, i need to calculate monthly payments and total payments based off starting and ending interest rates and including the number of years to borrow. I'm stuck with the calculations below, can someone please put me in the right direction when it comes down to the calculations. <html> <head> <title></title> <script type="text/javascript"> function calcPayment() { var loanamount = parseInt (document.getElementById ("loanAmt").value); var startinterest = parseInt (document.getElementById ("startRate").value); var endinterest = parseInt (document.getElementById ("endRate").value); var years = parseInt (document.getElementById ("loanYears").value); var //construct table var msg = "<table border='3' width='90%'>"; msg += "<tr>"; msg += "<td>Interest Rate</td>"; msg += "<td>Monthly Payment</td>"; msg += "<td>Total Payament</td>"; msg += "</tr>"; for (var i = startinterest; i <= endinterest; i+= 0.25) { msg += "<td>" + i + "</td>"; msg += "<td>" + Math.pow( i, 2) + "</td>"; msg += "<td>" + Math.sqrt( i) + "</td>"; msg += "</tr>"; } msg += "</table>"; document.getElementById("results").innerHTML = msg } </script> <style type="text/css"> body { background: black; color: blue; text-align: center; } #maintitle { color: red; font-size: 2em; font-weight: bold; } .infostyle { border-bottom: 5px red double; padding-bottom: 5px; } #infowrap { background-color: #FFFF99; border: 5px red solid; padding: 20px; margin: 20px 100px 50px 100px; height: 350px; } #contentwrap2 { background-color: #FFFF99; border: 5px white solid; margin-top: 65px; margin-left: -25px; margin-right: -25px; padding: 150px; } .formtext { font-size: 1.25em; font-weight: bold; margin-top: 20px; } #results { color: #339900; font-weight: bold; font-size: 2em; margin-top: -50px; margin-bottom: -50px; margin-left: -50px; } #spacer { margin-bottom: 5px; } </style> </head> <body> <div id="contentwrap1"> <div id="infowrap"> <div id="maintitle" class="infostyle"> Javascript Loan Calculator </div> <form> <div class="formtext" > Enter initial loan amount: </div> <input type="text" id="loanAmt" /> <div class="formtext"> Enter starting interest rate:</div> <input type="text" id="startRate" /> <div class="formtext"> Enter ending interest rate:</div> <input type="text" id="endRate" /> <div class="formtext"> Enter how many years to borrow:</div> <input type="text" id="loanYears" /> <div style="margin-top:5px;"> <input type="button" value="Compute monthly payments" onClick="calcPayment()"/> </div> </form> <div id="contentwrap2"> <div id="results"> </div> </div> </div> </body> </html> Create a game where 6 dice are 'rolled' by you and 6 dice are 'rolled' by the player (simulated by the click of a button). Add up both rolls. The goal is to come as close to a score of 100 as possible, without passing 100. Have a STOP button to signify when you are ready to stop rolling and compute the winner. The highest score under 100 wins. Display the number of times you win and the number of times the computer wins using javascript. So far I have the following code, however, my dice images are not working(they display as little broken symbols when I run the game). The game itself is running just fine but I can't figure out how to get the game to do the "Add up both rolls" step and beyond. If anyone can help it would be much appreciated. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Dice Game</title> <link href="Dicegame.css" type="text/css" rel="stylesheet" /> </head> <body> <div id='human' class='playerArea'> <h3>Human</h3> <div id='humanDice'> </div> <p id='humanTotal' class='total'></p> </div> <div id='computer' class='playerArea'> <h3>Computer</h3> <div id='computerDice'> </div> <p id='computerTotal' class='total'></p> </div> <div id='roll'> <a href='#' onclick='play(); return false;'>Roll</a> </div> <script type='text/javascript' src='lib.js'></script> <script type='text/javascript' src='dicegame.js'></script> </body> </html> *the external links are as follows* *Dicegame.css* body { background-color: #004400; } div.playerArea { position: absolute; top: 100px; bottom: 200px; width: 300px; background-color: #0996FF; border: 3px solid #0027C6; padding: 0 1em; } div#human { left: 100px; } div#computer { right: 100px; } div#roll { position: absolute; bottom: 50px; left: 100px; right: 100px; height: 100px; background-color: #FFFF00; border: 3px solid #FFBE00; } div#roll:hover { background-color: #FFFF99; } div#roll a { display: block; position: absolute; top: 0px; bottom: 0px; width: 100%; color: #004400; text-align: center; font-size: 90px; text-decoration: none; } div#roll a:hover { color: #FF0000; } p.total { margin: 10px; font-weight: bold; font-size: 8em; text-align: center; } p.winner { color: #00CC00; } p.loser { color: #CC0000; }[/CODE] *dicegame.js* Code: window.onload=function(){ Nifty("div.playerArea", "big"); } function roll() { var result = 0; result = Math.floor((Math.random() * 6) + 1); return result; } function play() { // create dice array var humanDice = new Array(); var computerDice = new Array(); // totals var humanTotal = 0; var computerTotal = 0; // output var out = ""; // roll the dice for (var i = 0; i < 6; i++) { humanDice[i] = roll(); humanTotal += humanDice[i]; computerDice[i] = roll(); computerTotal += computerDice[i]; } // display human dice out = displayDice(humanDice); document.getElementById('humanDice').innerHTML = out; // display computer dice out = displayDice(computerDice); document.getElementById('computerDice').innerHTML = out; document.getElementById('humanTotal').innerHTML = humanTotal; document.getElementById('computerTotal').innerHTML = computerTotal; if (humanTotal > computerTotal) { document.getElementById('humanTotal').className = 'total winner'; document.getElementById('computerTotal').className = 'total loser'; } else if (computerTotal > humanTotal) { document.getElementById('humanTotal').className = 'total loser'; document.getElementById('computerTotal').className = 'total winner'; } else { document.getElementById('humanTotal').className = 'total'; document.getElementById('computerTotal').className = 'total'; } } function displayDice(dice) { var out = ""; for (var i = 0; i < dice.length; i++) { out += "<img src='die" + dice[i] + ".png'/>"; } return out; } *lib.js* Code: function output(text, tag) { document.write("<" + tag + ">" + text + "</" + tag + ">"); } Hi, I wanna make a form that receives: textbox URL And textbox Anchor and result will be two anchors one <a href, and one phpBB Example: Url: www.pushpin.co.il Anchor: pushpin Results: <a href="http://www.pushpin.co.il">pushpin</a> [ url = http://www.pushpin.co.il/ ] pushpin[ /url ] Help? I am trying to remove all Javascript code from my HTML doc and put into external .js file(s). I have event triggers that I would like to move to an external file, but I am not sure how. Below is an example. [CODE] <a href="residential.html" class="textdeco" > <img class="img-menu" id="res" src="images/buttons/btn_res_mouse_out.jpg" alt="Residential" onmouseover="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_over.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_out.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_down.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_up.jpg')" /> [CODE] The reason I want to do this is that this code is repeated in all pages and I want to reduce potential maintenance issues. Any help will be appreciated. Hi im wondering if someone could be of some help please, im a newbie to javascript and after some help and advice if possible please. Ive used a template from the web which was a quiz template. Im just trying to get my javascript script to work. I want it to populate my html question/advice box so people can input what there answer to the question and it will give them advice. It's for a data classification advice for a work project. I just dont know where im going wrong or what im missing out - ive read loads of help sections on the web and still cant get the javascript to populate my html boxes. Any help or advice would be really appreciated. Thanks Lee Heres my html code which seems to work ok... the box etc is displayed just doesnt have any content. ----------------------------------------------------------------------- Code: <form method="POST"> <div align="center"><center><table BORDER="1"> <tr> <td COLSPAN="2" BGCOLOR="#4C0000"><div align="center"><center><p><font SIZE="+3" COLOR="#FFFFFF">Data Classification </font></td> </tr> <tr> <td COLSPAN="2" BGCOLOR="#4C0000"><div align="center"><center><p><font SIZE="-1" COLOR="#FFFFFF">2010 <a HREF="Data Governance</font> </p> </center></div><div align="center"><center><p><font COLOR="#FFFFFF">Click on "Next Question" to start advice. Be sure to use small letters (no caps) when entering your letter choice.</font> </td> </tr> <tr> <td><b>Question #:</b></td> <td ALIGN="LEFT"><input TYPE="TEXT" NAME="questNo" SIZE="4"></td> </tr> <tr> <td><b>Question:</b></td> <td><div align="center"><center><p><textarea COLS="70" ROWS="2" name="question" wrap="virtual"></textarea></td> </tr> <tr> <td ALIGN="RIGHT"><b>a)</b></td> <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceA" SIZE="75"></td> </tr> <tr> <td ALIGN="RIGHT"><b>b)</b></td> <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceB" SIZE="75"></td> </tr> <tr> <td ALIGN="RIGHT"><b>c)</b></td> <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceC" SIZE="75"></td> </tr> <tr> <td ALIGN="RIGHT"><b>d)</b></td> <td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceD" SIZE="75"></td> </tr> <tr> <td ALIGN="RIGHT"><b>Your choice:</b></td> <td><input TYPE="TEXT" NAME="yourChoice" SIZE="4"></td> </tr> <tr> <td COLSPAN="2"><div align="center"><center><p><input TYPE="button" VALUE="Check Current Advice" onClick="checkAnswer(this.form)"><input TYPE="button" VALUE="Next Question" onClick="nextQuestion(this.form)"> <input TYPE="reset" VALUE="Start Over" onClick="clearForm(this.form)"></td> </tr> <tr> <td ALIGN="RIGHT"><b>Results:</b></td> <td><div align="center"><center><p><textarea COLS="70" ROWS="3" name="Advice" wrap="virtual"></textarea></td> </tr> <tr> </form> -------------------------------------------------------------------------- Now heres my javascript which i just cant seem to get to work or integrate with the html question/advice box. There will be some text in there that was originally part of the template that i was going to remove at a later stage once id got a better underatnding of where i was going wrong. Code: <html> <head> <script LANGUAGE="JavaScript"> <!-- hide this script tag's contents from old browsers ---> function jumpBox(list) { location.href = list.options[list.selectedIndex].value } //Lee Quinn 2010 All Rights Reserved function init() { questions = new Array() questions[1] = "Is the information you are collecting or creating any of the following?" questions[2] = "Is the information you are collecting or creating any of the following?" questions[3] = "Is the information you are collecting or creating any of the following?" questions[4] = "Is the information you are collecting or creating any of the following?" answerA = new Array() answerA[1] = "Marketing brochures, Customer disclosure statements,Published annual reports, Interviews with news media, Press releases" answerA[2] = "Employee Handbook,Telephone Directory,Organization Charts,Policies and Standards,Training Manuals" answerA[3] = "Customer records, Correspondence containing customer information, Credit card listings,Personnel records/Employee performance reviews,Unit business plans,Proprietary/custom software,Budget information,Internal audit reports,Business reports on strategy, exposures etc" answerA[4] = "Strategic Plans,Encryption keys,Details of mergers or acquisitions,Financial results prior to publication,Online access codes such as passwords or pin" answerB = new Array() answerB[1] = "None of the above" answerB[2] = "None of the above" answerB[3] = "None of the above" answerB[4] = "None of the above" rightAns = new Array rightAns[1] = "A" rightAns[2] = "b" rightAns[3] = "c" rightAns[4] = "d" reference = new Array() reference[1] = "You have indicated yes to question 1, therefore the information you are collecting/creating will be classified as PUBLIC information. It is information that can be disclosed to anyone without violating an individual?s right to privacy. Knowledge of this information does not expose CFS to financial loss, embarrassment, or jeopardize the security of assets." reference[2] = "You have indicated yes to question 2, therefore the information you are collecting/creating will be classified as INTERNAL USE information. It is information that, due to technical or business sensitivity, is limited to employees and contractors who work on-site. It is intended for use only within CFS. Unauthorized disclosure, compromise, or destruction would not have a significant impact on CFS or its employees." reference[3] = "You have indicated yes to question 3, therefore the information you are collecting/creating will be classified as CONFIDENTIAL information. It is information that CFS and its employees have a legal, regulatory, or social obligation to protect. It is intended for use solely within defined groups in CFS. Unauthorized disclosure, compromise, or destruction would adversely impact CFS its customers or its employees. Unless otherwise stated all data should be treated as CONFIDENTIAL.Sensitive data = Confidential or Highly Confidential data." reference[4] = "You have indicated yes to question 4, therefore the information you are collecting/creating will be classified as HIGHLY CONFIDENTIAL information, It is the highest level of classification and is information whose unauthorized disclosure, compromise, or destruction could result in severe damage, provide significant advantage to a competitor, or incur serious financial impact to CFS or its employees. It is intended for restricted use by a very small number of people (possibly 0 or 1) with an explicit, predetermined need to know." } function nextQuestion(form) //set the total number of questions equal to quizend { var quizEnd = eval(4 * 1); if(form.questNo.value =5= quizEnd) { form.question.value = "1"; form.choiceA.value = "Marketing brochures, Customer disclosure statements,Published annual reports, Interviews with news media, Press releases"; form.choiceB.value = "None of the above"; form.choiceC.value = "Unsure"; form.yourChoice.value = "a,b,c,d"; form.results.value = "End of Advice. Your final results are listed below."; } else { if(form.questNo.value == "") {form.questNo.value = 1} else { form.questNo.value = eval(form.questNo.value) + 1; } form.question.value = questions[form.questNo.value]; form.choiceA.value = answerA[form.questNo.value]; form.choiceB.value = answerB[form.questNo.value]; form.choiceC.value = answerC[form.questNo.value]; form.choiceD.value = answerD[form.questNo.value]; form.yourChoice.value = ""; form.results.value = ""; if(form.myScore.value == "") {form.myScore.value = 0; } else { form.myScore.value = form.myScore.value; } } } function checkcurrentadvice(form) { var myScore = 0; var curve = 0; if(form.results.value != "") {form.results.value = "Sorry, no guessing allowed. In order to retry this question you will have to start the quiz over. Click on ''Next Question'' to continue."; } else if(form.yourChoice.value == rightAns[form.questNo.value]) { form.myScore.value = eval(form.myScore.value) + eval(1); form.results.value = "Conratulations! You are correct. That brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on ''Next Question'' to continue."; } else { form.results.value = "Sorry, you are incorrect. Please refer to " + reference[form.questNo.value] + " before retaking the quiz. This brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on ''Next Question'' to continue." } function clearForm(form) { form.questNo.value = ""; form.question.value = ""; form.choiceA.value = ""; form.choiceB.value = ""; form.choiceC.value = ""; form.choiceD.value = ""; form.yourChoice.value = ""; form.results.value = ""; form.myScore.value = ""; form.percent.value = ""; form.grade.value = ""; } </script> </head> </html> I want to create this box. http://i31.tinypic.com/oqb12q.jpg I know i can do it with a iFrame, but i've heard they are quite vunerable to hacking. I already have my .php sorted to show the admin posted news on my site (Im alright at .php; rubbish and javascript). Was just wondering if there was a way to do it without using iFrames ? Hi, I am working on a simple javascript craps game program. I need some advice since it won't display who the winner is, keep tally of who wins/loses, and the number of total games played. After using the error console there's an error with document.forms[0].thrower.value not being defined. Can anyone help me with this? PHP Code: <html> <head> <title> JavaScript Craps Game</title> <script type="text/javascript"> <!-- var n,die_1,die_2,total,h_won,c_won, flag, point,winner; function get_num() { var max = 6; var number=Math.random()*max + 1; var result=Math.floor(number); return result; } function roll_dice() { die_1 = get_num(); die_2 = get_num(); total= die_1 + die_2; // Insert the results of the dice into the appropriate fields document.getElementById("die1").innerHTML= die_1; document.getElementById("die2").innerHTML= die_2; document.getElementById("total").innerHTML= total; //document.forms[0].die1.value = die_1; //document.forms[0].die2.value = die_2; //document.forms[0].tot.value = total; //Subtracting 0 from these values forces them to be typed as numbers if (flag){ //This means we rolled something other than 2,3,7,11, or 12 so we have a point var th = document.forms[0].thrower.value; if (total == point) { //X wins winner = "x"; calculate_winnings(th,winner); flag = 0; //document.forms[0].flag.value="0"; game_count(); } else if (total == 7){ //Y wins winner = "y"; calculate_winnings(th,winner); flag = 0; //document.forms[0].flag.value="0"; game_count(); } } else{ var thwr = document.forms[0].thrower.value; if (total == 7 || total == 11) { //X wins document.getElementById("winner").innerHTML= "X Wins!"; //document.forms[0].winner.value= "X Wins!"; winner = "x"; calculate_winnings(thwr,winner); game_count(); } else if (total == 2 || total == 3 || total == 12){ //document.forms[0].winner.value= "Y Wins!"; document.getElementById("winner").innerHTML= "Y Wins!"; winner = "y"; calculate_winnings(thwr,winner); game_count(); } else { point = total; document.getElementById("winner").innerHTML= "Waiting for a 7 or a " + point; // document.forms[0].winner.value="Waiting for a 7 or a " + point; flag = 1; //document.forms[0].flag.value="1"; } } } function game_count() { //for keeping track of games if (n){ n = n + 1; } else { n = 1; } document.forms[0].totalgames.value = n; //return n; } function calculate_winnings(thrower,winner) { var button = document.forms[0].thrower.checked; if (button) { if (winner == 'x') { //computer was thrower and X won //document.forms[0].winner.value="Computer Wins!"; document.getElementById("winner").innerHTML= "Computer Wins."; add_to_computer_win(); } else { //computer was thrower and Y won //document.forms[0].winner.value="You win!"; document.getElementById("winner").innerHTML= "You win!"; add_to_human_win(); } } else { if (winner == 'x') { //human was thrower and X won //document.forms[0].winner.value="You Win!"; document.getElementById("winner").innerHTML= "You Win!"; add_to_human_win(); } else { //human was thrower and Y won //document.forms[0].winner.value="Computer Wins!"; document.getElementById("winner").innerHTML= "Computer Wins."; add_to_computer_win(); } } thrower = 0; } function add_to_human_win(){ if (h_won){ h_won = h_won + 1; } else { h_won = 1; } document.forms[0].human_won.value=h_won; } function add_to_computer_win(){ if (c_won){ c_won = c_won + 1; } else { c_won = 1; } document.forms[0].computer_won.value=c_won; } --> </script> </head> <body> <h1> <center> Craps Game </center></h1> <hr> <form> <table border="1"> <tr> <td width="45%" align="center"> <center><b><font size="4">Play!</font></b></center> <p><input type="button" name="roll" value="Roll Dice!" onclick="roll_dice()"></p> <table border="1"> <tr> <td>Die #1</td><td>Die #2</td><td>Total</td> </tr> <tr> <td><div id="die1"></div></td> <td><div id="die2"></div></td> <td><div id="total"></div></td> </tr> </table> <p>Result of roll: <div id="winner"></div></p> <!--<input type="text" size="30" name="winner" value=""></p>--> <p> </p> </td> <td width="35%"> <table border="1" cellspacing="7"> <tr> <th colspan="2" ><font size="4">Statistics:</font><br> <input type="text" size="2" name="totalgames" value="0"> total games played</th> </tr> <tr> <td align="center">Your wins</td><td>Computer wins</td> </tr> <tr> <td align="center"><input type="text" size="2" name="human_won" value="0"></td> <td align="center"><input type="text" size="2" name="computer_won" value="0"></td> </tr> </table> </td><td width="20%" align="center"> This will clear your statistics and start a new game<br> <input type="submit" name="startover" value="New Game"> </td></tr></table> <hr> <h3><a name="Help">Help</a></h3> <pre> The game of craps is a dice game played by two players, You and The House. First you toss the pair of dice. If the sum of the dice is 7 or 11, you win the game. If the sum is 2, 3, or 12, the house wins. Otherwise, the sum is designated as the "point," to be matched by another toss. So if neither player has won on the first toss, then the dice are tossed repeatedly until either the point or a 7 comes up. If a 7 comes up first, the house wins. Otherwise, you win when the point comes up. </body> </html> I've written a javascript class that displays a popup, but as soon as the code executes the popup vanishes. I've stepped through the code, line by line and there's nothing that "hides" the popup, the DIV that is created by the class, just reverts back to the default configuration generated by the following function: Code: function generateMarkup() { //build markup var newNode = document.createElement( 'DIV' ); newNode.id = IDs.HelpPopup; newNode.style.visibility = 'hidden'; newNode.innerHTML = [ '<div id="popup">', '<div id="inside">', '</div>', '</div>' ].join( '' ); return newNode; } All the changes made to the DIVs via document.getElementById code is completely wiped out. For example: Code: document.getElementById("inside").innerHTML = sText; If I stop processing just before the Class returns to the form, the generated code is exactly as I expect it to be with all the dynamic modifications. The class is triggered by an onClick event on a BUTTON. I've tried to put a "sleep" function in after executing the function that modifies the DIVs, but that seems to execute before the function, not after, so the popup just flickers into existence and then vanishes. Can anyone give me any hint(s) as to how to stop this happening. Hi, I am creating a HTML page and mailing it to the user(client side). This html page contains a Table and a button. On button click, I would like to create another HTML page based on the detail in the table,dynamically on run time and Open the newly created HTML. I need to use javascript to achieve this functionality. I have no Server-Client Configuration. And I need to run the Javscript only on client side to process the First HTML's table data and Create a new HTML page. The output of the javascript should also be put in a table format in the newly created HTML page. Here is some background information: The details from one server would be put into this first HTML along with a button. This HTML page is then mailed to Client side. The javascript in the HTML page then processes the Table data of first HTML. This can only be run at Client Side,once the user clicks the button and moreover I dont have Server-Client Configuration. I am creating a report and mailing it, For formatting purposes and for creating hyperlink to mailid's I chose HTML, Now I am struck here. Could some one please help me out with this. Thanks for your time. I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks |