I have been trying to use a function in a javascript file inside another html file. Essentially, it's not working and I think it has to do with my trying to make the javascript accessible on the html file. The function is supposed to add the values taken from the form and then output that sum. The first bit of code is my .js file and the second is my html.
function reset()
{
var q = new Array(5);
for(var i = 0; i < 5; i++)
{
q[i] = 100;
}
}
function calculate(form)
{
var q = new Array(5);
for(var i = 0; i < 5; i++) {
q[i] = 100;
}
q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
document.worksheet1.totals.value = total;
}
<html>
<header>
<script language="Javascript" src="tmdcalculation.js" type="text/javascript"></script>
</header>
<body>
<form name="worksheet1" id="worksheet1" onsubmit="calculate">
<table border="1" align="center">
<tr>
<td><table>
<tr>
<td>Feeling</td>
<td>How I have felt</td>
</tr>
<tr>
<td>Question 1?</td>
<td><select name="Q1" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 2?</td>
<td><select name="Q2" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 3?</td>
<td><select name="Q3" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 4?</td>
<td><select name="Q4" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 5?</td>
<td><select name="Q5" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
</table></td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td><table>
<tr>
<td align="right"><input name="button" type="button" onclick="calculate(this.form)" value="Analyse" /></td>
<td>Total Mood Calc:
<input name="totals" type="text" size="3" /></td>
<td><input name="reset" type="reset" onclick="initial()" value="Reset" /></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
P.s Some extra questions. I had borrowed some of the code from a website because I am still quite new to both javascript and html. Why does the reset function have the array values all turned to 100? And, why doesn't the calculate function just call the reset function instead of doing the same thing?
I'm only a newbie to jscript and this may not work but can give this a go
function reset()
{
var q = new Array(5);
for(var i = 0; i < 5; i++)
{
q[i] = 100;
}
}
function calculate() {
var q = new Array(5);
for(var i = 0; i < 5; i++) {
q[i] = 100;
}
q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
document.worksheet1.totals.value = total;
}
<form name="worksheet1" id="worksheet1" onsubmit="return calculate()">
Related
I'm having a difficult time getting this to work. I pretty much have the HTML able to display. I'm new to Javascript, I don't know how to make it work. Specifically the quantity multiplier, adding the total column, and getting the results of these functions to display in the elements. Please help!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td><select name="merch1" id="merch1" oninput="calcPrice('1')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td><input type="number" min="0" name="quantity1" id="quantity1" oninupt="multiplyQuantity('1')"></td>
<td><input type="text" name="calculated1" id="calculated1" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total1"></td>
</tr>
<br>
<tr>
<td><select name="merch2" id="merch2" oninput="calcPrice('2')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity2" id="quantity2" oninupt="multiplyQuantity('2')"></td>
<td><input type="text" name="calculated2" id="calculated2" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total2"></td>
</tr>
<br>
<tr>
<td><select name="merch3" id="merch3" oninput="calcPrice('3')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity3" id="quantity3" oninupt="multiplyQuantity('3')"></td>
<td><input type="text" name="calculated3" id="calculated3" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total3"></td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right"><strong>Total:</strong></td>
<td><input type="text" name="total" id="total" disabled></td></tr>
</table>
<br>
<b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calPrice(x){
var item = document.getElementById("merch"+i).value;
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
}
document.getElementById("price"+i).value = price;
}
function multiplyQuantity(){
var "calculated"+y = price * document.getElementById("quantity"+y).value;
document.getElementById("total"+y).value = calculated;
}
function findTotal(){
var arr = document.getElementsByName('pretotal')
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
There are a some bugs in your code (naming of variables and functions that don't match) and there is a much better way to do this then what you're doing now but as to not complicate matters more I just fixed the bugs.
Here is your working code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td>
<select name="merch1" id="merch1" oninput="calcPrice('1')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity1" id="quantity1" onchange="calcPrice('1')">
</td>
<td>
<input type="text" name="calculated1" id="calculated1" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total1">
</td>
</tr>
<br>
<tr>
<td>
<select name="merch2" id="merch2" oninput="calcPrice('2')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity2" id="quantity2" onchange="calcPrice('2')">
</td>
<td>
<input type="text" name="calculated2" id="calculated2" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total2">
</td>
</tr>
<br>
<tr>
<td>
<select name="merch3" id="merch3" oninput="calcPrice('3')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity3" id="quantity3" onchange="calcPrice('3')">
</td>
<td>
<input type="text" name="calculated3" id="calculated3" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total3">
</td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right">
<strong>Total:</strong>
</td>
<td>
<input type="text" name="total" id="total" disabled>
</td>
</tr>
</table>
<br>
<b>
Comment:
</b>
<br>
<textarea rows="4" cols="50"></textarea>
<br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calcPrice(x){
var item = document.getElementById("merch"+x).value;
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
}
multiplyQuantity(price,x);
findTotal();
}
function multiplyQuantity(price,index){
var calculated = price * document.getElementById("quantity"+index).value;
document.getElementById("total"+index).value = calculated;
document.getElementById("calculated"+index).value = price;
}
function findTotal(){
var total = [1,2,3]
//get total values
.map(x=>document.getElementById("total"+x).value||"0")
//convert to number
.map(x=>x*1)
//sum of numbers
.reduce(
(acc,item)=>acc+item
,0
);
document.getElementById('total').value = total;
}
</script>
</body>
</html>
I made a few changes. I changed 'oninput' to 'onchange' on all the elements. Also changed variable names.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td><select name="merch1" id="merch1" onchange="calPrice('1');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td><input type="number" min="0" name="quantity1" id="quantity1" onchange="multiplyQuantity('1');"></td>
<td><input type="text" name="price1" id="price1" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total1"></td>
</tr>
<br>
<tr>
<td><select name="merch2" id="merch2" oninput="calPrice('2');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity2" id="quantity2" onchange="multiplyQuantity('2');"></td>
<td><input type="text" name="price2" id="price2" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total2"></td>
</tr>
<br>
<tr>
<td><select name="merch3" id="merch3" oninput="calPrice('3');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity3" id="quantity3" onchange="multiplyQuantity('3');"></td>
<td><input type="text" name="price3" id="price3" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total3"></td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right"><strong>Total:</strong></td>
<td><input type="text" name="total" id="total" disabled></td></tr>
</table>
<br>
<b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calPrice(x){
var item = document.getElementById("merch"+x).value;
console.log(item);
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
default:
price = 0;
break;
}
console.log(price);
document.getElementById("price"+x).value = price;
var qty = document.getElementById("quantity"+x).value;
if(!qty) {
document.getElementById("quantity"+x).value = 1;
}
multiplyQuantity(x);
}
function multiplyQuantity(x){
var price = document.getElementById("price"+x).value;
var qty = document.getElementById("quantity"+x).value;
document.getElementById("total"+x).value = price * qty;
findTotal();
}
function findTotal(){
var arr = document.getElementsByName('pretotal');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
I am trying to get the values of inputs in a dynamically generated tr in to an array. How can I get the combined td values in an array?
<input type="button" id="button" value="Click Me" />
<table style="width:100%" id="sub1">
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</td>
</tr>
</table>
var onClick = function() {
var inputs = $("#sub1").find('.myInpCls');
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
alert($(el).val());
}
};
$('#button').click(onClick);
I can pull input values using .find('.myInpCls'). How can I get the combined values here? Something like the array of input1##value 1, input2##value 2 etc.
UPDATE:
I have a select box in the next td. I have to combine these 2 items. ie,the input value+corresponding select item.
Fiddle
To create an array of the input values you can use map():
var onClick = function() {
var values = $('#sub1 .myInpCls').map(function() {
return this.value;
}).get();
//use the values array here...
console.log(values);
};
$('#button').click(onClick);
Working example
I would loop the tr and search for the input and select. Than you can do whatever you want to.
Your updated example.
$('#button').click(function() {
$("#sub1 tr").each(function() {
var input = $(this).find(".myInpCls").val() || 0,
select = $(this).find(".mySelCls").val() || 0,
value = parseInt(input) + parseInt(select);
alert(value);
});
});
I cleaned up your code a bit. Note that my answer takes into account the case where a user doesn't fill up all fields.
$("#button").click(function(){
var append_array = [];
$("tr").each(function(){
var input = $(this).find("input").val();
var select = $(this).find("select").val();
(input != '' ? append_array.push(input) : '');
append_array.push(select);
});
console.log(append_array);
return append_array;
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" id="button" value="Click Me" />
<table style="width: 100%" id="sub1">
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select></td>
</tr>
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select></td>
</tr>
</table>
</body>
</html>
var onClick = function() {
var result= [];
var inputs = $("#sub1").find('.myInpCls');
for(var i=0; i < inputs.length;i++){
var el = inputs[i];
result.push($(el).val());
}
alert(result.join(","));
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table style="width: 100%" id="sub1">
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select></td>
</tr>
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select></td>
</tr>
</table>
This will give you comma separated values for the text boxes , I hope this is what you are looking for.
Please mark the answer if it works for you
Try this snippet.
var onClick = function() {
var inputs = $("#sub1").find('.myInpCls');
var arr = [];
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
arr.push("input #" + i + ' : ' + $(el).val());
}
var selects = $("#sub1").find('.mySelCls');
for (var j = 0; j < selects.length; j++) {
var sel = selects[j];
arr.push("select #" + j + ' : ' + $(sel).val());
}
alert(arr);
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table style="width:100%" id="sub1">
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</td>
</tr>
</table>
I am new to JavaScript and html. I was trying to make a GPA calculator using Javascript and add it to my blog : http://comptechniqz.blogspot.in/2016/04/gpa-both-sems.html
The layout using html is working exactly fine but the Calculate button does nothing when it is clicked. Can you please help me in finding what am I doing wrong here?
Thanks
My codes :
<form name="sem1">
<table border=5 bgcolor=#BADA55 cellpadding="5" cellspacing="2">
<th>Subject</th>
<th>Grade</th>
<tr>
<td>
<select name="subCRsem1_1" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr1" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_2" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr2" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_3" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr3" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_4" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr4" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_5" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr5" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_6" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr6" align=top maxlength=5></td>
</tr>
<tr align=center>
<td colspan=3><input type="button" value="Calculate" name="CalcButton" onclick="gpaCalc()"></td>
</tr>
</table>
</form>
<br>
</center>
<br>
<script language="JavaScript">
<!--
function gpaCalc()
{
//define valid grades and their values
var grade = new array(11);
var credit = new array(11);
var gradeReceived = new array(6);
var creditHour = new array(6);
// define valid grades and their values
grade = ['A+', 'A', 'A-', 'B', 'B-', 'C', 'C-', 'E', 'F', 'I', 'X'];
credit = [10, 10, 9, 8, 7, 6, 5, 2, 0, 0, 0];
// retrieve user input
gradeReceived[0] = document.sem1.gr1.value;
gradeReceived[1] = document.sem1.gr2.value;
gradeReceived[2] = document.sem1.gr3.value;
gradeReceived[3] = document.sem1.gr4.value;
gradeReceived[4] = document.sem1.gr5.value;
gradeReceived[5] = document.sem1.gr6.value;
// Allocate credits per subject
creditHour[0] = document.sem1.subCRsem1_1[document.sem1.subCRsem1_1.selectedIndex].value;
creditHour[1] = document.sem1.subCRsem1_2[document.sem1.subCRsem1_2.selectedIndex].value;
creditHour[2] = document.sem1.subCRsem1_3[document.sem1.subCRsem1_3.selectedIndex].value;
creditHour[3] = document.sem1.subCRsem1_4[document.sem1.subCRsem1_4.selectedIndex].value;
creditHour[4] = document.sem1.subCRsem1_5[document.sem1.subCRsem1_5.selectedIndex].value;
creditHour[5] = document.sem1.subCRsem1_6[document.sem1.subCRsem1_6.selectedIndex].value;
// calculate gpa
var totalGP = 0, GPA, totalHour=0;
var i, j, validGrade=0;
for(i=0; i<6; i++)
{
for(j=0; j<11;j++)
{
if(gradeReceived[i]==grade[j])
{
validGrade=1;
break;
}
}
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=creditHour[i];
}
else
{
alert("Error- Please use A+, A, A-, B, B-, C, C-, E, F, I or X in grades " );
return 0;
}
}
GPA=totalGP/totalHour;
alert("gpa = " + eval(GPA));
return 0;
}
//-->
</script>
caps your Array.
function gpaCalc()
{
//define valid grades and their values
var grade = new array(11); <-------- array has Caps in the A. should be Array(11) for all;
var credit = new array(11);
var gradeReceived = new array(6);
var creditHour = new array(6);
[UPDATE]
Change this part of your javascript
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=creditHour[i];
}
to this:
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=parseFloat(creditHour[i]);
}
I have created some code in JavaScript that allows the user to add values to a dropdown menu and three arrays which the dropdown menu pulls and displays values from. I was wondering if there is a way to create a cookie or something that will keep the values that a user adds. Below is my code an here is the link to the working JSfiddle.
<html>
<head>
<title>Selected Index Design</title>
<script >
var arr1 = ["",0,6,0,15,4,0,1,0,0,17];
var arr2 = ["",0,5,19,3,26,3,25,0,0,24];
var arr3= ["",0,15,0,9,0,5,0,0,0,7];
function fill() {
var si = document.getElementById('dd').selectedIndex;
if (si !==0)
{
var a = arr1[si];
var b= arr2[si];
var c= arr3[si];
var x = document.getElementById("factor").value;
var d= a*x;
var e= b*x;
var f=c*x;
var g = d*4 + e*4 + f*9;
document.getElementById("val1").innerHTML=d;
document.getElementById('val2').innerHTML=e;
document.getElementById('val3').innerHTML=f;
document.getElementById('val4').innerHTML=g;
}
}
function addoption(){
var mySelect = document.getElementById('dd'),
newOption = document.createElement('option');
newOption.value = document.getElementById('addopt').value;
if (typeof newOption.innerText === 'undefined')
{
newOption.textContent = document.getElementById('addopt').value;
}
else
{
newOption.innerText = document.getElementById('addopt').value;
}
mySelect.appendChild(newOption);
var newone= document.getElementById('addone').value;
var newtwo= document.getElementById('addtwo').value;
var newthree= document.getElementById('addthree').value;
arr1.push(newone);
arr2.push(newtwo);
arr3.push(newthree);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<th>dd</th>
<th>factor</th>
<th>v1</th>
<th>v2</th>
<th>v3</th>
<th>v4</th>
</tr>
<tr class="odd">
<td>
<form name = "dd">
<select name = "dd" id="dd" onchange = "fill()">
<option > a </option>
<option > b </option>
<option > c </option>
<option > d </option>
<option > e </option>
<option > f </option>
<option > g </option>
<option > h </option>
<option > i </option>
<option > j </option>
<option > k </option>
</select>
</form>
</td>
<td id="fac">
<form name="factor">
<select id="factor" onChange="fill();">
<option value=""></option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
</select>
</form>
</td>
<td id="val1"></td>
<td id="val2"></td>
<td id="val3"></td>
<td id="val4"></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<br><br>
<h3>Insert New data</h3>
<b>option<b>
<input type='text' value='' id='addopt'><br><br>
<b>array one</b>
<input type='text' value='' id='addone'><br><br>
<b>array 2</b>
<input type='text' value="" id='addtwo'><br><br>
<b>array 3</b>
<input type='text' value='' id='addthree'><br><br>
<button id="button" onclick="addoption()">add</button>
<div id='result'></div>
</body>
</html>
You might be interested by something like HTML5 Offline Storage: http://www.html5rocks.com/en/tutorials/offline/storage/
I am looking to fill 2 fields based on the selection of a dropdown. This is the code I am using now (which works but not work in my case):
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("minLvl").value=catSelected;
}
</script>
and the relevant HTML:
<table>
<tr>
<td>Event:</td>
<td>
<select name="Event" id="event" onChange="updateinput();">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
</select>
</td>
</tr>
<tr>
<td>Starting Time:</td>
<td><input type="text" name="dateTime"/></td>
</tr>
<tr>
<td>Level Range:</td>
<td><input type="text" size="3" maxlength="3" id="minLvl"> - <input type="text" size="3" maxlength="3" id="maxLvl"></td>
</tr>
<tr>
<td>Notes:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>Create Event:</td>
<td><input type="button" value="Create event!"></td>
</tr>
</table>
I know I can use e.options[e.selectedIndex].text to get the text and place it in the input, but is there a way I could add attributes to each option so its like <option value="option1" minLvl="1" maxLvl="10">Option1</option> and then pull the data from minLvl and maxLvl and then populate the values into the inputs?
function updateinput(){
var e = document.getElementById("event");
var catSelected = this.value;
document.getElementById("minLvl").value=catSelected;
}
<select name="Event" id="event" onChange="updateinput(this);">
I was able to get it to work with this code:
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var minLvl = e.options[e.selectedIndex].getAttribute("minLvl");
var maxLvl = e.options[e.selectedIndex].getAttribute("maxLvl");
document.getElementById("minLvl").value=minLvl;
document.getElementById("maxLvl").value=maxLvl;
}
</script>
<option value="option" minLvl="1" maxLvl="3">option</option>