|
JavaScript - Trying To Build A Talent Calculator
I could use some help. I'm technically a CSS/Javascript newbie, so I have no idea where to start. I've been researching the past few hours, but I'm completely lost.
If anyone could help, I would greatly appreciate it. I don't need someone to build the whole thing for me. What I could use, is an example. Basically a simple setup that someone could create real quick would help. For the example, if anyone has the time and willing to help, make this type of simple setup. I basically look at wow's talent cal, but this isn't a wow talent calculator. It's for a different game. I still need 3 trees. You don't have to put in a ton of icons or mouseover tooltips. I would like this though(for a quick setup): 3 talent trees 2 talent points per tree each talent has at least 1 talent point that can be added tooltip that could say like "0%" with 0 talent points in it, and say "33%" when 1 talent point is added. If possible make the 2nd tier unactive until 1st tier has the point in it. This would be a simple setup. I don't know how to go about doing it. But, if someone could create something like this, and perhaps a "howto" of how to add new talents, like where to add them in the script files, it would be appreciate. I know this is a lot of work, but any help ie appreciated. Similar TutorialsHi, I'm just learning javascript. I need one script for the following data. I'm having three headings. heading 1 heading 2 heading 3 on clicking heading 1 it opens subheading 1 subheading 2 on clicking subheading 1 it opens subsubheading 1 subsubheading 2 My problem is when I open heading 1 it opens subheading 1 and 2, when I open heading 2, contents of heading 1 must disappear(switch contents) and only contents of heading 2 must appear. When I use style display: none, contents are moving on opening others. I'm currently using an automation software to automate a series of steps I perform on my computer. One of the tasks involves hundreds of If/Then loops, extracts text from websites using an embedded web browser, computes equations and write text files. The thing is, in order to share this with somebody else, they also need the same automation software installed, and then need to import it. So it's a process I'm trying to replace by creating a small program with a GUI that involves a simple installation on the user's PC (or ideally without installation). The language must be flexible enough to perform the same actions that I listed above - and more preferably. I'm a complete novice with anything besides HTML/CSS so I'm looking for A flexible programming language that isn't rocket science to learn from scratch and is ideal for small stand-alone programs The ability to create a GUI. I'd be happy to read any good reference you have about the language/design knowledge needed for GUI's. Thanks in advance I am building a portion of html in a javascript loop. Everything is working great except for the function call I am trying to build inside the div. The resulting html when rendered in a page looks like Code: <div onclick="ShowMyPopupSetRead(" a','a','a','a')=""><u style="color: blue; cursor: pointer"> Hello </u></div>
you can see the quotation in the beginning of the function call throws the whole thing off. Below you can see how I am building the string. Code: var assembledCall = "onclick='ShowMyPopupSetRead('" + subject + "','" + sender + "','" + reciever + "','" + id + "')";$('#MailTable').append("<div " + assembledCall + "><u style='color: blue; cursor: pointer'> " + subject + " </u></div>");
can any one see where my problem is? Hi I am new here, am having a terrible problem with animation build up. have searched and found various codes to stop,but can't implement in the .js in a way that works. Maybe am putting in wrong place. Wondering if anyone can help, would really appreciate it. Following is the code: Thank you Code:
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 600}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
I want to create a 'go forward' and 'go back' link on each of roughly 100 pages. Rather than insert a hyperlink (a href) I would like to build it from an array or list, because the actual links may change. So I was hoping there may be a way to do something like this: link xxx.html+1 or xxx.html-1 I have no idea if this is even the right forum for this! Thanks for your help. I know I'm missing something ever so small but maybe you guys can help... Thanks all <code> <script type="text/javascript"> function insertLink() { var lnk = prompt("Enter Link [http://www.url.com]"); var href = lnk.value; var lnkBuild = '<a href=" + href + "></a>' alert(lnkBuild); } } </script> </code> I have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working. What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns. Hi, I'm new to Javascript and need to help with something, I'll try and explain this as best as I can but feel free to ask questions if it doesn't make sense. I'm basically building a javascript/html calculator but I need the calculation to appear gradually in a table, the table need to be 3 columns accross and add a row each time a calculation button is pressed, the first column can remain blank for now but will need to contain a text field eventually, second column needs to show the calculation symbol, third column shows the number. Here's an example: 4+2+7-5=8 |Blank| | 4 | |Blank| + | 2 | |Blank| + | 7 | |Blank| - | 5 | |Blank| = | 8 | Here's the code I have so far so you can get a feeling of what it looks like, this table need to go into the area div and will replace what is currently the 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>Sample Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="basic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="basic.js"></script>
<meta name="generator" content="Nokia WRT extension for Visual Studio 2.0" />
<script type="text/javascript" language="javascript">
function UpdateInput(a, b) {
var MyElement = document.getElementById("Input");
MyElement.innerHTML = MyElement.innerHTML + a;
var MyElement = document.getElementById("Area");
MyElement.innerHTML = MyElement.innerHTML + b;
}
function Calculate() {
var result = eval(document.getElementById("Input").innerHTML);
var total = document.getElementById("Total");
total.innerHTML = result;
var MyElement = document.getElementById("Area");
MyElement.innerHTML = MyElement.innerHTML + '<br>=' + result;
}
</script>
</head>
<body onLoad="init()">
<div id="Main">
<table cellpadding="0" cellspacing="0" width="100%">
<div id="Area">
</div>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="style1">Total:</td>
<td>
<div id="Total"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="Input"></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/plus.png" onclick="UpdateInput('+','<br>+')" /></td>
<td><img src="Images/minus.png" onclick="UpdateInput('-','<br>-')" /></td>
<td><img src="Images/times.png" onclick="UpdateInput('*','<br>*')" /></td>
<td><img src="Images/divide.png" onclick="UpdateInput('/','<br>/')" /></td>
</tr>
<tr>
<td><img src="Images/7.png" onclick="UpdateInput(7,7)" /></td>
<td><img src="Images/8.png" onclick="UpdateInput(8,8)" /></td>
<td><img src="Images/9.png" onclick="UpdateInput(9,9)" /></td>
<td><img src="Images/percent.png" onclick="UpdateInput('%','<br>%')" /></td>
</tr>
<tr>
<td><img src="Images/4.png" onclick="UpdateInput(4,4)" /></td>
<td><img src="Images/5.png" onclick="UpdateInput(5,5)" /></td>
<td><img src="Images/6.png" onclick="UpdateInput(6,6)" /></td>
<td><img src="Images/oneoverx.png" /></td>
</tr>
<tr>
<td><img src="Images/1.png" onclick="UpdateInput(1,1)" /></td>
<td><img src="Images/2.png" onclick="UpdateInput(2,2)" /></td>
<td><img src="Images/3.png" onclick="UpdateInput(3,3)" /></td>
<td><img src="Images/plusminus.png" /></td>
</tr>
<tr>
<td><img src="Images/0.png" onclick="UpdateInput(0,0)" /></td>
<td><img src="Images/dot.png" onclick="UpdateInput('.','.')" /></td>
<td><img src="Images/equals.png" onclick="Calculate()" /></td>
<td><img src="Images/sub.png" /></td>
</tr>
</table>
</div>
</body>
</html>
Hello, I'm very new to javascript and am probably dabbling in stuff that I shouldn't if I am new to it. Nonetheless I've exhausted my resources and am seeking some answers from people who know what they're talking about. I've got this XML file: Quote: <?xml version="1.0" encoding="utf-8"?> <Menu> <Section> <Title>Product Information</Title> <Topic url="howto.html">How to use This Product</Topic> <Topic url="product.html">Product Overview</Topic> <Topic url="sysreq.html">System Requirements</Topic> </Section> ..... </Menu> There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics. Here's the JS i'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it: Quote: if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); //create ajax var } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE } xhttp.open("GET","menu.xml",false); xhttp.send(""); xmlDoc=xhttp.responseXML; document.write("<div class='acc'>"); var x=xmlDoc.getElementsByTagName("Section"); for (i=0;i<x.length;i++) { document.write("<dt>"); document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>"); document.write("<dd><ul>"); var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0]; for (foo=0;foo<x.length;foo++) { document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>"); } document.write("</ul></dd>"); } document.write("</div>"); It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example: Product Information How to Use This Product How to Use This Product How to Use This Product How to Use This Product How to Use This Product I'm not very confident in the syntax, or what it is exactly doing. Any guidance would be very appreciated. Please keep in mind I'm very new. Thanks! I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript">
<!--
function build() {
document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;
//print example: http://www.widget.com/content/ELM-VOC
return true;
}
-->
</script>
<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">
<input type="hidden" name="redirect" value="">
<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">
<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>
<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>
<!--truncated code -->
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! Below is the code for a calculator using script. can one help me to explain me the colored line?? <!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=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> <script language="javascript" type="text/javascript"> function multiply() { a=Number Quote: Quote: (document.calculator.number1.value) ; b=Number(document.calculator.number2.value); c=a*b; document.calculator.total.value=c; } function addition(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a+b; document.calculator.total.value=c; } function subtraction(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a-b; document.calculator.total.value=c; } function division(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a/b; document.calculator.total.value=c; } function modulus(){ a=Number(document.calculator.number1.value); b=Number(document.calculator.number2.value); c=a%b; document.calculator.total.value=c; } </script> </head> <body> <form name="calculator"> Number 1: <input type="text" name="number1"> Number 2: <input type="text" name="number2"> Get Result: <input type="text" name="total"> <input type="button" value="ADD" onclick="javascript:addition();"> <input type="button" value="SUB" onclick="javascript:subtraction();"> <input type="button" value="MUL" onclick="javascript:multiply();"> <input type="button" value="DIV" onclick="javascript:division();"> <input type="button" value="MOD" onclick="javascript:modulus();"> </form> </body> </html> Hi all. I'm having a bit of a problem returning a different value each time a different button is pressed for calculator. What am I doing wrong? Code: <script>
function calc(btname){
for(var x=0;x<=11;x++){
if(x==0){
btname="zero";
}else if(x==1){
btname="one";
}else if(x==2){
btname="two";
}else if(x==3){
btname="three";
}else if(x==4){
btname="four";
}else if(x==5){
btname="five";
}else if(x==6){
btname="six";
}else if(x==7){
btname="seven";
}else if(x==8){
btname="eight";
}else if(x==9){
btname="nine";
}else if(x==10){
btname="multiply";
}else if(x==11){
btname="divide";
}
if('document.forms.test.'+btname+'.onClick'){
alert(btname);
}
}
}
function scalc(){
var sign="";
var btname="";
document.write('<form name="test">');
for(var x=0;x<=11;x++){
if(x==0){
btname="zero";
}else if(x==1){
btname="one";
}else if(x==2){
btname="two";
}else if(x==3){
btname="three";
}else if(x==4){
btname="four";
}else if(x==5){
btname="five";
}else if(x==6){
btname="six";
}else if(x==7){
btname="seven";
}else if(x==8){
btname="eight";
}else if(x==9){
btname="nine";
}else if(x==10){
btname="multiply";
sign = "*";
}else if(x==11){
btname="divide";
sign = "/";
}
if(x<10){
document.write('<input type="button" size="30" name="'+btname+'" value="'+x+'" onClick="calc(this);"> ');
}else if(x>9 && x<12){
document.write('<input type="button" size="30" name="'+btname+'" value="'+sign+'" onClick="calc(this);"> ');
}
if(x==2 || x == 5 || x == 8){
document.write('<br>');
}
}
document.write('</form>');
}
scalc();
</script>
ANY help is GREATLY appreciated! I'm using the following code to calculate an age from the given date of birth however it works for some DOB's, gives wrong answers for some and undefined for others, can someone help me? Code:
<div style="font-size:13px; font-family:Verdana;">
<script>
<!--
/*Darren McGrady */
var current= new Date()
var day = current.getDate()
var month = current.getMonth() + 1
var year = current.getFullYear()
var a = 29
var b = 12
var c = 1980
var age
if (month < b)
age = (year-c)-1
if ((month == b) && (day < a))
age = (year-c)-1
else
age = year-c
document.write(age);
//-->
</script>
</div>
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 Hi everyone, I am currently doing a project with a calculator and I am having a bit of trouble trying to figure something out and was wondering if I could get some help with it or possibly even a good site to read up on it. I am trying to make it so my calculator is disabled on startup. I can only seem to get my textbox disabled but I need everything disabled except the ON button.. so whey they click the ON button everything is enabled. when they click the OFF button everything is wiped and disabled.. I'm not to familiar with that yet so all the help is greatly appreciated.. I'm not sure if I'm going on the right direction with this but heres my code... Code: var value
function start() {
form1.tb1.disabled = true;
}
onload = start;
function enable() {
form1.tb1.disabled = false
}
function shownumber(value){
document.form1.tb1.value=document.form1.tb1.value+value
document.form1.plus.disabled=false
document.form1.minus.disabled=false
document.form1.times.disabled=false
document.form1.divide.disabled=false
}
function showoperator(value){
document.form1.tb1.value=document.form1.tb1.value+value
}
function evalit(){
document.form1.tb1.value=eval(document.form1.tb1.value)
}
and my body is Code: <table width="210" border="1" bgcolor="#0000">
<form name="form1">
<tr>
<td align="center">
<table width="173" border="0" cellspacing="0" cellpadding="0" height="130">
<tr>
</tr>
<tr>
<td colspan="3">
<input type="text" name="tb1" size="20">
</td>
<td width="53" height="0"> <font color="#FFFFFF">
<input type="button" name="clear" value=" c "
onClick="document.form1.tb1.value=''">
</font></td>
</tr>
<tr>
<td width="53" height="0">
<input type="button" name="7" value=" 7 "
onClick="shownumber('7')">
</td>
<td width="53" height="0">
<input type="button" name="eight" value=" 8 "
onClick="shownumber('8')">
</td>
<td width="53" height="0">
<input type="button" name="nine" value=" 9 "
onClick="shownumber('9')">
</td>
<td width="53" height="0"> <font color="#FFFFFF">
<input type="button" value=" / " name="divide"
onClick="showoperator('/')">
</font></td>
</tr>
<tr>
<td width="53" height="0">
<input type="button" name="four" value=" 4 "
onClick="shownumber('4')">
</td>
<td width="53" height="0">
<input type="button" name="five" value=" 5 "
onClick="shownumber('5')">
</td>
<td width="53" height="0">
<input type="button" name="six" value=" 6 "
onClick="shownumber('6')">
</td>
<td width="53" height="0"> <font color="#FFFFFF">
<input type="button" name="times" value=" x "
onClick="showoperator('*')">
</font></td>
</tr>
<tr>
<td width="53" height="0">
<input type="button" name="one" value=" 1 "
onClick="shownumber('1')">
</td>
<td width="53" height="0">
<input type="button" name="two" value=" 2 "
onClick="shownumber('2')">
</td>
<td width="54" height="0">
<input type="button" name="three" value=" 3 "
onClick="shownumber('3')">
</td>
<td width="72" height="0"> <font color="#FFFFFF">
<input type="button" name="minus" value=" - "
onClick="showoperator('-')">
</font></td>
</tr>
<tr>
<td width="53" height="0">
<input type="button" name="zero" value=" 0 "
onClick="shownumber('0')">
</td>
<td width="53" height="0"> </td>
<td width="54" height="0">
<input type="button" value=" + " name="plus"
onClick="showoperator('+')">
</td>
<td width="72" height="0"> <font color="#FFFFFF">
<input type="button" name="calculate" value=" = "
onClick="evalit()"
</font></td>
<tr>
<td> <input type="button" id="but1" value="On" onClick="enable();"> <input type="button" id="button2" value="Off">
</td>
</tr>
</table>
</td>
</tr>
</form>
</body>
</html>
Hi all master and expert coders I am working on a calculator which using the instructor's codes from the school. The problem that I having right now is the operator. I have successfully complete only the addition, but could not manage on subtraction and the rest operator. I hope experienced codes would help me out on this. Below is my codes. <!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> <script type="text/javascript"> function calculate() { var value1 = parseInt(validate(document.getElementById("value1").value)); var value2 = parseInt(validate(document.getElementById("value2").value)); radioButtonCheck(); checkboxCheck(); dropDownListCheck(); document.getElementById("result").value = addition(value1, value2); document.getElementById("result").value = subtraction(value1, value2); document.getElementById("result").value = multiplication(value1, value2); document.getElementById("result").value = division(value1, value2); } function validate(value) { if (value == null || value == "") { alert("Required Field"); return 0; } else if (isNaN(value)) { alert("Must be a number"); return 0; } else return value; } function addition(value1, value2){ return value1 + value2; } // trying to use the same addition return statement but fail. function radioButtonCheck() { if ((document.getElementById("radio1").checked == false) && (document.getElemtById("radio2").checked == false)) { alert("Please select a radio button"); valid = false; } } function checkboxCheck() { if ((document.getElementById("cbox1").checked == false) && (document.getElementById("cbox2").checked == false)) { alert("Please select a checkbox"); valid = false; } } function dropDownListCheck() { if ((document.getElementById("ddlOperator").selectedIndex == 0)) { alert("Please select a operator"); valid = false; } } </script> <title>Calculator By Alsus</title> </head> <body> <h2>Calculator</h2> <table border = "1"> <tr> <td>Value 1:</td> <td><input type="text" id="value1" name="value1" /></td> </tr> <tr> <td>Value 2:</td> <td><input type="text" id="value2" name="value2" /></td> </tr> <tr> <td>Operator:</td> <td><input type="text" id="Operator" name="Operator" /></td> </tr> <tr> <td><input type="radio" id="radio1" name="radio1" value="radio1" />Radio1<br /></td> <td><input type="radio" id="radio2" name="radio2" value="radio2" />Radio2<br /></td> </tr> <tr> <td><input type="checkbox" id="cbox1" name="cbox1" value="cbox1" />Checkbox 1<br /></td> <td><input type="checkbox" id="cbox2" name="cbox2" value="cbox2" />Checkbox 2<br /></td> </tr> <tr> <td> <select id="ddlSelect"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> </td> <td> </td> </tr> <tr> <td>Result:</td> <td><input type="text" id="result" name="result" /></td> </tr> </table> <input type="submit" id="btn_sub" name="btn_sub" value="Submit" onclick="calculate()" /> <input type="reset" id="btn_res" name="btn_res" value="Reset" /> </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.. aaaaaa
|
|||||||