JavaScript - Creating A Pythagorean Theorem Calculator (simple!)
Hey guys. This should be extremely easy for you to answer. This is actually for an intro to computers class I am taking and I am completely stumped. Basically I have to create a really simple Pythagorean Theorem calculator and this is what I have so far:
[CODE] <html> <head> <title>A Pythagoras Conversion</title> </head> <script type="text/javascript"> var right_leg, left_leg, hypotenuse; alert ("This calculates the hypotenuse of a right-angled triangle using the Pytahgorean Thereom. Press <OK> to continue!"); right_leg=prompt("Enter the length of the right leg."); left_leg=prompt("Enter the length of the left leg."); sq1 = right_leg*right_leg; sq2 = left_leg*left_leg; hypotenuse = math.sqrt(sq1 + sq2); alert ("The Hypotenuse= "); </script> <body> </body> </html> [CODE] Everything works except for when it comes to it actually calculating. The calculation window never pops up. Please tell me what I am doing wrong in the calculation here....it is driving me nuts. :/ Thanks so much... Similar Tutorialshi again, I want to say thank you for all of the help and I have the last assignment that she wants us to do and I had to pull up another assignment that she wanted us to build upon( which is one of those coding without anything advance) Code: <html> <head> <title> COMSC 100 Assignment 10 by Dennis McNeill [1190802] </title> <script> function getInputAsText(_id){return document.getElementById(_id).value} function getInputAsNumber(_id){return parseFloat(document.getElementById(_id).value)} function setOutput(_id, _value){document.getElementById(_id).value = _value} function calculate() { // declare all variables var variable1 var variable2 var variable3 var variable4 var variable5 // get variable's value = getInputAsNumber() = getInputAsNumber() // perform concatenation // write output value setOutput("resultAsText",resultAsNumber) } </script> </head> <body> Directions:<br> Type 5 numbers and click go<br> The highest of the 5 will appear<br> It is okay to use a decimal point<br> Input values:<br> First<input id="variable1"><br> Second<input id="variable2"><br> Third <input id="variable3"><br> Fourth<input id="variable4"><br> Fifth<input id="variable5"><br> <input type="submit" value="go" onclick="calculate()"> Output<br> Result #1:<input id= "myResult1" size="25"> </body> </html> now she wants us to do max <beta and then name the variables with if a<b and I don't know if I put that in the concatenation or what to name my variables! ugh. NOT ASKING TO DO MY HOMEWORK 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> I have been having problems adding checkboxes and option selects in the same function.. Here's what I have. Code: <script type="text/javascript"> function bonuscalc() { var aaaa = document.getElementById("aaaa").value; var bbbb = document.getElementById("bbbb").value; var cccc = document.getElementById("cccc").value; if (dddd.checked){ var dddd = document.dddd.value = 2; } else { var dddd = document.dddd.value = 1; } var eeee = document.getElementById("eeee").value; var bonus = aaaa* bbbb * dddd * cccc * eeee; var roundbonus = Math.round(bonus*10)/10; document.getElementById("roundbonus").value = roundbonus; } </script> Javascript first.. The part I'm not sure about is the if/else part for checbox. Now the html: Code: <form action="" id="calc1"> <table width="100%"> <tbody> <tr> <td>A status: <select id="aaaa"> <option value="1.1">A1</option> <option value="1.02">A2</option> <option value="1">A3</option> <option value="0.95">A4</option> </select> </td> <td>B status: <select id="bbbb"> <option value="1">0%</option> <option value="0.99">1%</option> <option value="0.98">2%</option> <option value="0.97">3%</option> <option value="0.96">4%</option> <option value="0.95">5%</option> <option value="0.94">6%</option> <option value="0.93">7%</option> <option value="0.92">8%</option> <option value="0.91">9%</option> <option value="0.90">10%</option> </select> </td> <td>E status:<input id="eeee" type="text" /> </td> <td>D status: <input id="dddd" name="dddd" type="checkbox"> </td> <td>C status: <select id="cccc"> <option value="1">No</option> <option value="1.2">Yes</option> </select> </td> </tr> <tr> <td width="100%"> <input type="button" value="Submit" onclick="bonuscalc()" /> <br /> Result: <input type="text" readonly="readonly" id="roundbonus" /> </td> </tr> </tbody> </table> </form> I hope it's not too confusing. The idea is to assign value 2 if the checkbox is checked and value 1 is it isn't.. I'm new to javascript but not to programming. Here is my code: PHP Code: PHP Code: print "<form name='goldcalculator'>"; print "<input type='hidden' name='goldspot' value='$goldvalue'>"; print "<select name='gunit' onchange='updateTotal();'>"; print "<option value='20'>Pennyweight (DWT)</option>"; print "<option value='31.1'>Grams (g)</option>"; print "</select><br>"; print "10K <input type='text' name='10k' onchange='updateTotal();'><br>"; print "14K <input type='text' name='14k' onchange='updateTotal();'><br>"; print "18K <input type='text' name='18k' onchange='updateTotal();'><br>"; print "22K <input type='text' name='22k' onchange='updateTotal();'><br>"; print "24K <input type='text' name='24k' onchange='updateTotal();'><br>"; print "TOTAL <input type='text' name='totalprice'>"; print "</form>"; Code: <script language="JavaScript"> function updateTotal() { var u = document.goldcalculator.gunit.value; var spotprice = document.goldcalculator.goldspot.value / u; var gold10 = document.goldcalculator.10k.value; var gold14 = document.goldcalculator.14k.value; var gold18 = document.goldcalculator.18k.value; var gold22 = document.goldcalculator.22k.value; var gold24 = document.goldcalculator.24k.value; var calculatedPrice = document.goldcalculator.totalprice.value; calculatedPrice = ((spotprice*.999*gold24)+(spotprice*.916*gold22)+(spotprice*.75*gold18)+(spotprice*.585*gold14)+(spotprice*.417*gold10)); } </script> I don't know where to begin to debug this. It's very simple. The $goldvalue variable is non-editable and is pulled off my MySQL database and that works. They fill in the inputs via the PHP form and then it basically adds them up and spits out the total. Can someone tell me what's wrong? I am trying to make a fairly simple program for practicing for a mid-term that is coming up in my intro to programming class and I need some help figuring out how to create the function/setting up the variables. Essentially what the code is, is a program that adds up the values put in 5 text boxes, the values from checkboxes that are selected, and the value of a selected radio button. I do not think I have the variables named correctly, and I have no idea how to create the function. I will post what I have so far so you can get a better idea of what it is I'm trying to make. It's so simple, just adding up everything. I just need help figuring out how to achieve that... Here is the code I have so far: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Computer Price Caculator</title> <script type="text/javascript"> function calc() { with( document.frmCom ) { var P = setPerepherals.selectedIndex; var S = setShipping.selectedIndex; var total = P + S; display.value = "Your systems total price is:" setPerepherals.value[P].text + setShipping.value[S].text + "\n Total:\t$" + total.toFixed(2); }//end with }//end calc() </script> <style type="text/css"> .auto-style1 { margin-left: 17px; } </style> </head> <body background="PracticeMidterm/bg.jpg"> <center> <h1> <img src="PracticeMidterm/Computer.jpg" height="124" width="179">Computer Price Calculator</h1> <hr class="auto-style1" style="width: 784px" /> <form name="frmCom"> <table style="border:thin black solid"> <tr> <td colspan="2" width="700" align="center"> Processor (CPU): <input type="text" align="middle" name="textCPU"></input> <br/> Motherboard: <input type="text" name="textMotherboard" ></input><br/> Case: <input type="text" name="textCase" ></input><br/> Power Supply: <input type="text" name="textPowersupply" ></input><br/> Monitor: <input type="text" name="textMonitor" ></input> </td></tr> <tr> <td align="center"><hr width="500" align="center" /></td> </tr> <tr> <td colspan="1" align="center"> Perepherals: <input type="checkbox" align="middle" name="checkboxKeyboard" value="25.00" onclick="setPerepherals()" >Keyboard ($25.00)</input> <br/><input type="checkbox" align="middle" name="checkboxMouse" value="10.00" onclick="setPerepherals()" >Mouse ($10.00)</input> <br/><input type="checkbox" align="middle" name="checkboxTablet" value="60.00" onclick="setPerepherals()" >Tablet ($60.00)</input> </td> </tr> <tr> <td align="center"><hr width="500" align="center" /></td> </tr> <tr> <td colspan="1" align="center"> Shipping: <input type="radio" align="middle" name="radShipping" value="5.00" onclick="setShipping()" >Ground ($5.00)</input> <br/><input type="radio" align="middle" name="radShipping" value="10.00" onclick="setShipping()" >Second Day Air ($10.00)</input> <br/><input type="radio" align="middle" name="radShipping" value="15.00" onclick="setShipping()" >Overnight Air ($15.00)</input> </td> </tr> <tr> <td align="center"><hr width="500" align="center" /></td> </tr> <tr> <td colspan="1" align="center"><input value="Calculate price" type="button" /></td> </tr> <tr> <td colspan="1" align="center"><textarea name="display" rows="10" cols="40">Total Price:</textarea></td> </tr> </table> *******For more information visit <a href="http://www.howstuffworks.com/pc.htm">How Computers Work.</a>******* </form> </center> </body> </html> Hi there, me again, lol. I'm now working on a simple JavaScript calculator script, and here's what I have so far. 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form name="Calculator"> <input type="text" name="Output" size="22"> <br/> <br/> <input name="1" type="button" value=" 1 " onClick="document.Calculator.Output.value += '1'" /> <input name="1" type="button" value=" 2 " onClick="document.Calculator.Output.value += '2'" /> <input name="1" type="button" value=" 3 " onClick="document.Calculator.Output.value += '3'" /> <input name="1" type="button" value=" 4 " onClick="document.Calculator.Output.value += '4'" /> <br/> <input name="1" type="button" value=" 5 " onClick="document.Calculator.Output.value += '5'" /> <input name="1" type="button" value=" 6 " onClick="document.Calculator.Output.value += '6'" /> <input name="1" type="button" value=" 7 " onClick="document.Calculator.Output.value += '7'" /> <input name="1" type="button" value=" 8 " onClick="document.Calculator.Output.value += '8'" /> <br/> <input name="1" type="button" value=" 9 " onClick="document.Calculator.Output.value += '9'" /> <input name="1" type="button" value=" 0 " onClick="document.Calculator.Output.value += '0'" /> <input name="1" type="button" value=" + " onClick="document.Calculator.Output.value += ' + '" /> <input name="1" type="button" value=" - " onClick="document.Calculator.Output.value += ' - '" /> <br/> <input name="1" type="button" value=" C " onClick="document.Calculator.Output.value = ''" /> <input name="1" type="button" value=" / " onClick="document.Calculator.Output.value += ' / '" /> <input name="1" type="button" value=" * " onClick="document.Calculator.Output.value += ' * '" /> <input name="1" type="button" value=" = " onClick="document.Calculator.Output.value += ' = ' + eval(Calculator.Output.value)" /> </form> </body> </html> The calculator itself is fully working functionally, feel free to test to your heart's content. :P The problem I'm having is not really a problem per se, more of a behaviour I don't want in the script. After clicking the = button and getting the results of the calculation displayed, clicking another number will just concatenate (I believe that's the right term) that to the result of the sum, and I don't want this to happen. If I've just done a calculation, I want the results of it to be cleared as soon as I hit another button. My guesses are that I would need to do this via some function activated by the = button. Is there some sort of way I can have the output of a sum cleared after a calculation has been done, so that the next calculation becomes a seperate one? If you're still not getting what I'm saying entirely, just let me know, I will try to provide screenshots. Thanks. Hey, This is my first post! I'm trying to learn javascript and i have tried to create a simple calculator, I have a calculator that does Code: x * x = x but when i try to cut / paste it into another project it just refuses to work! This is undoubtably VERY BASIC but any help is VERY much appreciated Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function fmtPrice(value) { result="$"+Math.floor(value)+"."; var cents=100*(value-Math.floor(value))+0.5; result += Math.floor(cents/10); result += Math.floor(cents%10); return result; } function compute() { var total_price = (document.forms[0].cost.value)*(document.forms[0].qty.value); document.forms[0].total_price.value=total_price; var total_price = fmtPrice(total_price); document.forms[0].total_price.value=total_price; } function resetIt() { document.forms[0].cost.value="0"; document.forms[0].qty.value="0"; document.forms[0].total_price.value=""; } // End --> </SCRIPT> Here is a link to the page - http://dl.dropbox.com/u/29087/Java%20Laptop%20Calc.html ( so you can view source code, saving me from posting it all here ) what am i doing wrong?!! man java is so much harder than VB! Ok so I know basic html and css, no problem but i just started learning javascript and this class is kicking my but! I have this assignment due tonight and I'm taking this class online so there not much help beyond google. I know it's "simple' but I cannot figure this out for the life of me!!! It driving me bonkers, and I really don't want to fail. So any help would be more that appreciated! K here is the html: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Change Calculator</title> <link rel="stylesheet" type="text/css" href="default.css" /> <script type="text/javascript" src="calculate_coins.js"></script> </head> <body> <div id="content"> <h1>Change Calculator</h1> <label>Enter number of cents (0-99):</label> <input type="text" id="cents" /> <input type="button" value="Calculate" name="calculate" id="calculate" /><br /> <p> </p> <label>Quarters:</label> <input type="text" id="quarters" class="disabled" disabled="disabled" /><br /> <label>Dimes:</label> <input type="text" id="dimes" class="disabled" disabled="disabled" /><br /> <label>Nickels:</label> <input type="text" id="nickels" class="disabled" disabled="disabled" /><br /> <label>Pennies:</label> <input type="text" id="pennies" class="disabled" disabled="disabled" /><br /> <p> </p> </div> </body> </html> i need to get it to function properly. Please HELLP ME!!! I am trying to make a simple calculator to calculate dBm, Vpp, Vrms. It is basically a conversion calculator. I am brand new to JavaScript and tried to follow a tutorial but I'm coming up short. I will post both my .js and .html code below. My issue is that when I hit the "Calculate" button nothing happens. Here is the javascript. It has a main calculate function and a function that gives me a log base 10 method. Code: //Main Calculation function calculate() { if(dBm === null && Vpp === null){ var calc = document.getElementById('ecalc'); var Vpp2 = (4*Vrms)/Math.sqrt(2); var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z)))); var Vrms2 = Vrms; return false; } else if(Vpp === null && Vrms === null){ var calc = document.getElementById('ecalc'); var Vpp2 = Math.sqrt(0.008*Z)*Math.pow(10,(dBm/20)); var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2); var dBm2 = dBm; return false; } else if(dBm === null && Vrms === null){ var calc = document.getElementById('ecalc'); var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z)))); var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2); var Vpp2 = Vpp; return false; } calc.Vpp2.value = Vpp2; calc.Vrms2.value = Vrms2; calc.dBm2.value = dBm2; return false; } //Log base 10 Function function log10(val) { return Math.log(val) / Math.log(10); } Here is the HTML. It has the form in it. As you can see there are 4 inputs. Z is required and only one of the other values can be entered (hence the if statements in the js. 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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> <script type="text/javascript" src="Calculate.js"> </script> </head> <body> <form id="ecalc" action="#"> <table align="center"border="1"> <tr> <td colspan="2" align="center"> Enter a Z value and one other value. </td> </tr> <tr> <td align="right">dBm: </td> <td align="left"><input type="text" name="dBm" size="20" /></td> </tr> <tr> <td align="right">Vpp: </td> <td align="left"><input type="text" name="Vpp" size="20" /></td> </tr> <tr> <td align="right">Vrms: </td> <td align="left"><input type="text" name="Vrms" size="20" /></td> </tr> <tr> <td align="right">Z (Ohms): </td> <td align="left"><input type="text" name="Z" size="20" value="50" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Calculate" onclick= "calculate();" /> </td> </tr> <tr> <td align="right">dBm:</td> <td alig="left"><input type="text" name="dBm2" size="20" readonly="readonly" /></td> </tr> <tr> <td align="right">Vpp:</td> <td alig="left"> <input type="text" name="Vpp2" size="20" readonly="readonly" /></td> </tr> <tr> <td align="right">Vrms:</td> <td alig="left"> <input type="text" name="Vrms2" size="20" readonly="readonly" /></td> </tr> </table> </form> </body> </html> There is probably something simple that needs to be fixed but I have spent a whole day trying to figure this out. If anyone has any comments please let me know. Thanks in advance! Hi all, I am creating a simple 3 field calculator that calculates net, vat and gross. The user has to input 2 of the 3 fields, hit calculate and it should fill the 3rd field. I have so far succeeded with the net field (enter in gross and vat) but the other 2 throw up spurious results! I have worked out these equations (they work on a calculator) Net = G - (( G * V ) / ( V + 100 )) VAT = (( G - N ) x 100 ) / N Gross = N + ( N x ( V / 100 )) Heres the code for the javascript Code: <script type="text/javascript"> function netvatgross_calc() { var net = (Number(document.calc.gross.value))-(((Number(document.calc.gross.value)) * (Number(document.calc.vat.value)))/((Number(document.calc.vat.value))+100)); var net = net.toFixed(2); document.calc.net.value=net; var vat = (((Number(document.calc.gross.value))-(Number(document.calc.net.value)))*100)/(Number(document.calc.net.value)); var vat = vat.toFixed(2); document.calc.vat.value=vat; var gross = (Number(document.calc.net.value))+((Number(document.calc.vat.value))/100)*(Number(document.calc.net.value)); var gross = gross.toFixed(2); document.calc.gross.value=gross; } </script> Here's the work in progress I am also wanting to add some code to throw up an error if less or more than 2 values have been entered. What am I doing wrong? Any help greatly appreciated! Cheers Dan Hi guys i'm new to the world of programming and have been watching some videos on youtube by thenewboston to get to know Java. In one of his tutorials he shows you how to make a basic calculator but i wanted to improve it by adding the option to choose which operation you want to perform. However not being familiar with code i cannot think of a way to put it so that it is error free.I do also have a seperate class file which coresponds with the second paragraph.The errors appear in the if statements because of the characters * / - +. I am currently using eclipse to write my code as it is very useful for showing you your mistakes. Thanks in advance. Code: Scanner tut7 = new Scanner(System.in); double fnum, snum, answer; System.out.println("Enter First Number Please:"); fnum = tut7.nextDouble(); System.out.println("Enter Second Number Please:"); snum = tut7.nextDouble(); Scanner opinput = new Scanner(System.in); Operation OperationObject = new Operation(); System.out.println("Enter What Operation You Want to Perform: "); String oper = opinput.nextLine(); OperationObject.calc(oper); if (oper = * ){ answer = fnum * snum; System.out.print("The Answer is: "); System.out.println(answer); }else{ if (oper = / ){ answer = fnum / snum; System.out.print("The Answer is: "); System.out.println(answer); }else{ if (oper = + ){ answer = fnum + snum; System.out.print("The Answer is: "); System.out.println(answer); }else{ if (oper = - ){ answer = fnum - snum; System.out.print("The Answer is: "); System.out.println(answer); }else{ System.out.println("Invalid Operation!!!"); } } } Hello! I have a really simple JavaScript calculator I'm running, and for the life of me can not figure out how to solve this crazy number problem. It's not doing the math properly, and javascript is not my strongest suit. All my script does is take user input of numbers into a form field, subtract that from another form and multiply the answer of those two forms by whatever the user put in. Example: 210 (minus) 120 (multiplied by) .90 = 81 Here is the actual script: Code: // Calculator function CalculateSum(Atext, Btext, Ctext, form) { var A = parseFloat(Atext); var B = parseFloat(Btext); var C = parseFloat(Ctext); form.Answer.value = A - B * C; } /* ClearForm: this function has 1 argument: form. It clears the input and answer fields on the form. It needs to know the names of the INPUT elements in order to do this. */ function ClearForm(form) { form.input_A.value = ""; form.input_B.value = ""; form.input_C.value = ""; form.Answer.value = ""; } // end of JavaScript functions --> And the html I am using: Code: <form name="Calculator" method="post"> <p>Base Average<input type=text name="input_A"></p> <p>Current Average:<input type=text name="input_B"></p> <p>Percentage of:<input type=text name="input_C"></p> <p>Your ball speed is: (miles per hour) <input name="Answer" type=text readonly> </p> <p> <input type="button" value="Calculate Handicap" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form.input_C.value, this.form)"> <input type="button" value="Clear" name="ClearButton" onClick="ClearForm(this.form)"> </p> </form> Any help would be greatly appreciated! Hi I was wondering if someone could help me. I successfully implemented a number of sortable lists, using a table in html. However I wanted to table cells to be scrollable, which does not apparently work, I tried overflow: auto;, overflow: hidden; and overflow: scroll; in css and it did not work, the table cells kept moving to fit the draggable content. I checked on the internet and found that as stated, table cells cannot be made scrollable. Therefore I decided to do it all with div elements. However I want the div elements structured in a 5 x 3 format. Therefore I thought I would implement it in dom. However I am a newby to dom. I have created the following code, which is simple but repetitive, the function createTable simply creates the div elements (1,2,3,4,5...) and writes the class and id attributes to each. I then appended several of the elements into a div container I created, called divcontainer with a class right. There is also a div element already in the document, class and id = 'right'. I therefore tried to add the divcontainer to this. The function however is causing a page error and none of the dom div elements are loading. Any help appreciated. I would simply prefer to create the divcontainer and append the div elements. Should I take out the div element right already in the document and instead use something like document.body.appendChild(divcontainer) or something similar. Also the function call createTable() should I use window.onload = function(){} instead. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <META name="generator" content="Free Script Editor, see www.freescripteditor.com"> <TITLE>Email Client</TITLE> <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/> <script src="javascript/prototype.js" type="text/javascript"></script> <script src="javascript/scriptaculous.js" type="text/javascript"></script> <script src="javascript/dragdrop.js" type="text/javascript"></script> <script src="javascript/controls.js" type="text/javascript"></script> <script src="javascript/effects.js" type="text/javascript"></script> <script src="javascript/builder.js" type="text/javascript"></script> <script type="text/javascript"> var xmlhttp = false; //check if we are using IE try { //If the javascript version is greater than 5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); alert ("You are using Microsoft Internet Explorer."); } catch(e) { //if not, then use the older active x object. try { //if we are using Internet Explorer xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); alert("You are using Microsoft Internet Explorer"); } catch (E) { xmlhttp = false; } } //If we are using a non-IE browser, crea a javascript instance of the object if(!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); alert ("You are not using Microsoft Internet Explorer"); } function getmessage(inbox_id) { var object = document.getElementById('content'); var server = "getmessage.php?inbox_id=" +inbox_id; xmlhttp.open("GET", server); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { object.innerHTML = xmlhttp.responseText; } } xmlhttp.send(null); } function createTable() { var divright = document.getElementById('right'); var divcontainer = createElement('div'); divcontainer.setAttribute('class', 'right'); var div1 = document.createElement('div'); div1.writeAttribute('class', 'droparea'); div1.writeAttribute('id', 'sortList1'); var div2 = document.createElement('div'); div2.writeAttribute('class', 'droparea'); div2.writeAttribute('id', 'sortList2'); var div3 = document.createElement('div'); div3.writeAttribute('class', 'droparea'); div3.writeAttribute('id', 'sortList3'); var div4 = document.createElement('div'); div4.writeAttribute('class', 'droparea'); div4.writeAttribute('id', 'sortList4'); var div5 = document.createElement('div'); div5.writeAttribute('class', 'droparea'); div5.writeAttribute('id', 'sortList5'); var div6 = document.createElement('div'); div6.writeAttribute('class', 'droparea'); div6.writeAttribute('id', 'sortList6'); var div7 = document.createElement('div'); div7.writeAttribute('class', 'droparea'); div7.writeAttribute('id', 'sortList7'); var div8 = document.createElement('div'); div8.writeAttribute('class', 'droparea'); div8.writeAttribute('id', 'sortList8'); var div9 = document.createElement('div'); div9.writeAttribute('class', 'droparea'); div9.writeAttribute('id', 'sortList9'); var div10 = document.createElement('div'); div10.writeAttribute('class', 'droparea'); div10.writeAttribute('id', 'sortList10'); var div11 = document.createElement('div'); div11.writeAttribute('class', 'droparea'); div11.writeAttribute('id', 'sortList11'); var div12 = document.createElement('div'); div12.writeAttribute('class', 'droparea'); div12.writeAttribute('id', 'sortList12'); var div13 = document.createElement('div'); div13.writeAttribute('class', 'droparea'); div13.writeAttribute('id', 'sortList13'); var div14 = document.createElement('div'); div14.writeAttribute('class', 'droparea'); div14.writeAttribute('id', 'sortList14'); var div15 = document.createElement('div'); div15.writeAttribute('class', 'droparea'); div15.writeAttribute('id', 'sortList15'); divright.wrap("divcontainer"); divcontainer.appendChild(div1); divcontainer.appendChild(div2); divcontainer.appendChild(div3); } window.onload = function() { Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false, containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true}); } </script> </HEAD> <BODY> <div class="container" id="container"> <!--header div - for message 'new', 'reply' --> <div class="header"> </div> <!-- end of header div--> <!--Begin the div class left - this will hold the inbox emails for review--> <div class="left" id='container1'> <?PHP include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php'); $str = "id"; $i = 0; $inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i"; $inbox_result = mysql_query($inbox_query); while($row = mysql_fetch_array($inbox_result)) {//start while trainer query $inbox_id = $row['0']; $to = $row['1']; $subject= $row['2']; $sent = $row['3']; $message = $row['4']; $i++; echo "<div class='draggable' id='$str$i'> $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$subject</a> </div>"; }//end while inbox query ?> </div> <!--end left div--> <!--begin the right div - this is the right side of the screen frame for postponed email area--> <div class="right" id="right" onload="createTable()"> </div> <!--end the right div element--> <!--begin the main content div - this will hold sent message--> <div class="content" id="content" overflow="auto"> <!--end content div--> </div> </BODY> </HTML> I have just completed my JS studies and wish to try 3 things to test what I have learned, first I wish to create a simple animation, then I'll attempt my own slideshow and last a specific script. First, can I try the animation on this specific forum? If not then is there another forum for this on this board or do I have to go to an animation specific site please?
Hi all, new here. Hope this makes sense. In Salesforce, I am adding what they call an "S-Control" via HTML/JavaScript that will display an alert if certain field criteria are met. The alert would be a reminder to hit the "Submit for Approval" button if the Quote Estimate is equal to or greater than $50,000. For testing purposes I added another criteria, that the Opportunity name must = Test and Stage must = Proposal/Price Quote. Here's what I've come up with so far, taking from other examples, but I receive no alert, so I'm wondering where it went wrong. Code: <html> <head> <script type="text/javascript" language="javascript" src="/js/functions.js"></script> <script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script> <script type="text/javascript"> function throwalert() { // Begin by creating 3 variables for the criteria to be met. var oppname = "{!Opportunity.Name}"; var isstatus = "{!Opportunity.StageName}"; var quoteest = "{!Opportunity.Quote_Estimate__c}" // Now create a function which will decide if the criteria is met or not and throw alert message. //var oppname= "Test" //var quoteest >= "50000" //var isstatus = "Proposal/Price Quote" var msgg = "The quote estimate for this opportunity is equal to or greater than $50,000. Remember to submit this opportunity for approval. " if ((oppname == "Test") && (quoteest >= 50000) && (isstatus == "Proposal/Price Quote")) { alert(msgg); } else { window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};" } } </script> </head> <body onload="throwalert()";> </body> </html> I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly. The concept is like this website: www.doner.com In the bottom right hand corner, if you select a city, different contact information appears. My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID. For example... Code: <a href="#" class="michigan">Michigan</a> <a href="#" class="ohio">Ohio</a> <a href="#" class="illinois">Illinois</a> <div id="michigan"> Michigan container </div> <div id="ohio"> Ohio container </div> <div id="illinois"> Illinois container </div> The JavaScript I have written so far is... Code: var anchor = document.getElementsByTagName('a').className; // grab all hyperlinks and their classes var div = document.getElementsByTagName('div').getElementByID; // grab all divs and their IDs if (anchor = div) { // check to see if a hyperlink's class has a matching div ID div.style.display = "none"; if (anchor.onclick) { // if the hyperlink is clicked... div.style.display = "visible"; // make matching div ID visible } } Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading. Can anyone help me? How could i make a calculator that changes three values when a vertex on an image moves. Example : When a point moves on the triangle it changes the cost quality and time. I have this start and need the meat for the concept to work.<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <p><img src="Assets/Project-triangle.svg.png" width="500" height="492" alt=""/>-------------------------------------------<img src="Assets/triangle.gif" width="224" height="210" alt=""/></p> <p> <label for="textfield">Cost :</label> <input type="text" name="textfield" id="textfield"> <label for="textfield2"> Time :</label> <input type="text" name="textfield2" id="textfield2"> <label for="textfield3">Quality :</label> <input type="text" name="textfield3" id="textfield3"> </p> <p> </p> </body> </html> Help would be greatly appreciated! Hi , this is my bmi calculator script <HEAD> <script type="text/javascript"> <!-- Begin script of spillo3000 function calculateBMI() { var weight = eval(document.form.weight.value) var height = eval(document.form.height.value) var height2 = height / 100 var BMI = weight / (height2 * height2) if(weight == "" || isNaN(weight) || height2 == "" || isNaN(height2)) { alert("inserisci un valore"); return; } else { document.form.BodyMassIndex.value=custRound(BMI,1); if(BMI < 18.5) { document.getElementById('feedback').innerHTML = 'Underweight '; }else if(BMI >=18.5 && BMI < 29.9) { document.getElementById('feedback').innerHTML = 'Normal '; }else if(BMI > 29.9) { document.getElementById('feedback').innerHTML = 'Overweight '; } } } function custRound(x,places) { return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places) } function resetAll(){ document.getElementById('feedback').innerHTML=""; return true; } // End --> </script> </HEAD> <!-- --> <BODY> <div align="left"> <form name="form" id="form"> <input type="Text" name="weight" size="4"> Peso (Kg)<br> <input type="Text" name="height" size="4"> Altezza (Cm)<br> <input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI<br> <input type="Text" name="feedback" id="feedback" style="padding:10px 0 20px 0; border:none; font-weight:600; color:#555555; font-family:verdana;" ><br> <input type="button" style="font-size: 8pt" value="Calcola" onClick="calculateBMI()" name="button"> <input type="reset" style="font-size: 8pt" value="Reset" onclick="resetAll()" name="button"> </form> </div> <!-- Script Size: I would want to show writing that it says if is in overweight, norms or I underweigh, but the script does not work. could someone help me? please |