I'm making website that includes running total. By that I mean as the user selects items on a drop-down menu, a running cost will increase/decrease accordingly. Similar (if not the same) as this.
The issue I'm having is that when the user starts selecting items, "Total Price For the Build £NaN" appears. I'm new to Javascript so I really have no idea why this is happening.
The HTML:
<form action="" id="partsForm" onsubmit="return false;">
<fieldset>
<legend>Choose your parts</legend>
<label>CPU</label>
<select id="cpu" name="cpu" onchange="calculateTotal()">
<option value="None">None</option>
<option value"A6">AMD A6 Dual Core (£56)</option>
<option value="A8">AMD A8 Quad Core (£72)</option>
<option value="760k">Athlon 760k Quad (£72)</option>
<option value="A10">AMD A10 Quad Core (£119)</option>
</select>
<br /> <br />
<label>Motherboard</label>
<select id="mobo" name="mobo" onchange="calculateTotal()">
<option value="None">None</option>
<option value"DS2">Gigabyte A88X-DS2 (£45)</option>
<option value="D3H">Gigabyte A88X D3H (£60)</option>
<option value="A88X-M">ASUS A88X-M Plus (£67)</option>
<option value="A88X-UP4">Gigabyte A88X-UP4 (£109)</option>
</select>
<br /> <br />
<label>Graphics Chip</label>
<select id="gfx" name="gfx" onchange="calculateTotal()">
<option value="None">None</option>
<option value"260X">AMD R7 260X (£149)</option>
<option value="650ti">GTX 650ti Boost (£169)</option>
<option value="750ti">GTX 750ti (£179))</option>
<option value="R9_270">AMD R9 270 (£205)</option>
</select>
<br /> <br />
<label>Power Supply</label>
<select id="psu" name="psu" onchange="calculateTotal()">
<option value="None">None</option>
<option value"CX430">Corsair CX430 (£49)</option>
<option value="CX500">Corsair CX500 (£59)</option>
<option value="CX600">Corsair CX600 (£69)</option>
<option value="CX750">Corsair CX750 (£89)</option>
</select>
<br /> <br />
<label>Case</label>
<select id="case" name="case" onchange="calculateTotal()">
<option value="None">None</option>
<option value"Fractal">Fractal Core 1000 (£39)</option>
<option value="NZXT">NZXT Source 210 Elite (£59)</option>
<option value="200R">Corsair 200R (£69)</option>
<option value="300R">Corsair 300R (£89)</option>
</select>
<br /> <br />
<label>Memory</label>
<select id="ram" name="ram" onchange="calculateTotal()">
<option value="None">None</option>
<option value"4GB">4GB DDR3 (£39)</option>
<option value="8GB">8GB DDR3 (£69) </option>
<option value="16GB">16GB DDR3 (£109)</option>
</select>
<br /> <br />
<label>Storage</label>
<select id="storage" name="storage" onchange="calculateTotal()">
<option value="None">None</option>
<option value="1TB">1TB HDD (£54)</option>
<option value="120GB_SSD">120GB SSD (£69)</option>
<option value="256GB_SSD">256GB SSD (£119)</option>
<option value="1TB_SSD">1TB + 120GB SSD (£119)</option>
</select>
<div id="totalPrice" style="display:block;"> </div>
</fieldset>
The JavaScript:
//CPU Prices
var cpu_prices = new Array();
cpu_prices["None"]=0;
cpu_prices["A6"]=56;
cpu_prices["A8"]=72;
cpu_prices["760k"]=72;
cpu_prices["A10"]=119;
//MotherBoard Prices
var mobo_prices = new Array();
mobo_prices["None"]=0;
mobo_prices["DS2"]=45;
mobo_prices["D3H"]=60;
mobo_prices["A88X-M"]=67;
mobo_prices["A88X-UP4"]=109;
//Graphics Chip Prices
var gfx_prices = new Array();
gfx_prices["None"]=0;
gfx_prices["260X"]=149;
gfx_prices["650ti"]=169;
gfx_prices["750ti"]=179;
gfx_prices["R9_270"]=205;
//Power Supply Prices
var psu_prices = new Array();
psu_prices["None"]=0;
psu_prices["CX430"]=49;
psu_prices["CX500"]=59;
psu_prices["CX600"]=69;
psu_prices["CX750"]=89;
//Case Prices
var case_prices = new Array();
case_prices["None"]=0;
case_prices["Fractal"]=39;
case_prices["NZXT"]=59;
case_prices["200R"]=69;
case_prices["300R"]=89;
// Memory Prices
var ram_prices = new Array();
ram_prices['None']=0;
ram_prices["4GB"]=39;
ram_prices["8GB"]=69;
ram_prices["16GB"]=109;
//Storage Prices
var storage_prices = new Array();
storage_prices['None']=0;
storage_prices['1TB']=54;
storage_prices['120GB_SSD']=69;
storage_prices['256GB_SSD']=119;
storage_prices['1TB_SSD']=119;
//This will find the price of the CPU chosen by the user
function getCPUPrice() {
var CpuPrice=0
var theForm = document.forms["partsForm"];
var selectedCpu = theForm.elements['cpu'];
//sets CpuPrice to whatever the user has chosen
CpuPrice = cpu_prices[selectedCpu.value];
//return CpuPrice
return CpuPrice;
}
//This will find the price of the Motherboard chosen by the user
function getMOBOPrice() {
var MoboPrice=0
var theForm = document.forms["partsForm"];
var selectedMobo = theForm.elements['mobo'];
//sets MoboPrice to whatever the user has chosen
MoboPrice = mobo_prices[selectedMobo.value];
//return MoboPrice
return MoboPrice;
}
//This will find the price of the Graphics Chip chosen by the user
function getGFXPrice() {
var GfxPrice=0
var theForm = document.forms["partsForm"];
var selectedGfx = theForm.elements['gfx'];
//sets GfxPrice to whatever the user has chosen
GfxPrice = gfx_prices[selectedGfx.value];
//return GfxPrice
return GfxPrice;
}
//This will find the price of the Power Supply chosen by the user
function getPSUPrice() {
var PsuPrice=0
var theForm = document.forms["partsForm"];
var selectedPsu = theForm.elements['psu'];
//sets PsuPrice to whatever the user has chosen
PsuPrice = psu_prices[selectedPsu.value];
//return PsuPrice
return PsuPrice;
}
//This will find the price of the Case chosen by the user
function getCasePrice() {
var CasePrice = 0;
var theForm = document.forms["partsForm"];
var selectedCase = theForm.elements['case'];
//sets CasePrice to whatever the user has chosen
CasePrice = case_prices[selectedCase.value];
//return CasePrice
return CasePrice;
}
//This will find the price of the Memory chosen by the user
function getRamPrice() {
var RamPrice=0
var theForm = document.forms["partsForm"];
var selectedRam = theForm.elements['ram'];
//sets RamPrice to whatever the user has chosen
RamPrice = ram_prices[selectedRam.value];
//return RamPrice
return RamPrice;
}
//This will find the price of the Storage device chosen by the user
function getStoragePrice() {
var StoragePrice=0;
var theForm = document.forms["partsForm"];
var selectedStorage = theForm.elements['storage'];
//sets StoragePrice to whatever the user has chosen
StoragePrice = storage_prices[selectedStorage.value];
//return StoragePrice
return StoragePrice;
}
//Get the Totals
function calculateTotal()
{ //gets prices from other functions
var buildPrice = getCPUPrice() + getMOBOPrice() +
getGFXPrice()+ getPSUPrice() + getCasePrice() + getRamPrice() + getStoragePrice();
//displays total cost
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Build £"+buildPrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
I appreciate that it's quite a lot of similar code, but I'd really like to thoroughly understand why this isn't working.
Thanks in advance.
Let me know if there's anything missing from this.
Actually looks like you fell prone to the copy/paste snafu. Each of your 2nd list items, was missing an "=".
Original:
<select id="cpu" name="cpu" onchange="calculateTotal()">
<option value="None">None</option>
<option value"A6">AMD A6 Dual Core (£56)</option>
<option value="A8">AMD A8 Quad Core (£72)</option>
<option value="760k">Athlon 760k Quad (£72)</option>
<option value="A10">AMD A10 Quad Core (£119)</option>
</select>
Fixed Fiddle
You have a typo in your code
<option value"CX430">Corsair CX430 (£49)</option>
There is a = missing after value
And this is the same error for each first item of your lists.
I tried your code with the second choice each time, and it worked.
That's because of the js wrapping :
If you wrap in an onload function, the function calculateTotal() is provate, it can't be accessed anywhere but in the onLoad callback. See http://jsfiddle.net/U2zSk. If you wrap directly in head, it's working. See http://jsfiddle.net/U2zSk/2/
your Variable buildPrice is the result of many different methods that query selectors. If you have not selected a value in all the selectors, the function that calculates the value of the selector will not return a number and when the final sum that will result NaN. If you put in all selector as the default 'None' option should not give you problems.
Additionally you have many options incorrect:
<option value"Fractal">Fractal Core 1000 (£39)</option>
<option value"CX430">Corsair CX430 (£49)</option>
<option value"260X">AMD R7 260X (£149)</option>
<option value"A6">AMD A6 Dual Core (£56)</option>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have a select list that goes from 0-4 and when selecting a number, it will output the name in the array. Instead of when selecting the number 1 and getting the ouput "Adam", i just get "Ron" for every number.
friends = new Array('Alex', 'Adam', 'Jake', 'Cydney', 'Ron');
document.getElementById('go').onclick = function() {
var nameSelected = document.getElementById('index').value;
oneArrayValue = friends[0];
oneArrayValue = friends[1];
oneArrayValue = friends[2];
oneArrayValue = friends[3];
oneArrayValue = friends[4];
document.getElementById('result').value = nameSelected;
};
<body>
<select id='number' name=''>
<option value = '0'>0</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>
</select>
<button id='go' class=''>GO</button>
<input id='result' name='' value='' class=''>
<script src='js/javascript 07.js'></script>
</body>
friends = new Array('Alex','Adam','Jake','Cydney','Ron');
/*
you can even declare using the following:
friends = ['Alex','Adam','Jake','Cydney','Ron']; // <- this
*/
document.getElementById('go').onclick = function () {
var nameSelected = document.getElementById('number').value;
// getting the name from the index selected
oneArrayValue = friends[nameSelected];
document.getElementById('result').value = oneArrayValue;
};
<select id = 'number' name = ''>
<option value = '0'>0</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>
</select>
<button id = 'go' class = ''>GO</button>
<input id = 'result' name = '' value = '' class = ''>
Your code is not coded as the you expect result, see working code below
friends = new Array('Alex','Adam','Jake','Cydney','Ron');
document.getElementById('go').onclick = function () {
var nameSelected = document.getElementById('index').value;
oneArrayValue = friends[nameSelected];
document.getElementById('result').value = oneArrayValue;
};
<input type="text" id="result">
<select id="index">
<option val="0">0</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
</select>
<input type="button" value="go" id="go" />
I think you're trying to achieve something like this:
var friends = ['Alex', 'Adam', 'Jake', 'Cydney', 'Ron'];
document.getElementById('go').addEventListener('click', function() {
var idx = parseInt(document.getElementById('index').value);
document.getElementById('result').innerHTML = friends[idx];
});
<select id="index">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="Go" id="go" />
<div id="result"></div>
That's because you keep overwriting oneArrayValue so that only the last assignment sticks. Not to mention that oneArrayValue doesn't even seem to be declared in your code.
This is actually much simpler than what you are doing:
// Here's the sligtly simpler "Array Literal" syntax for making an array
var friends = ['Alex','Adam','Jake','Cydney','Ron'];
// Use the modern, standards-based approach to event binding, not `onclick`, etc.
document.getElementById('go').addEventListener("click", function () {
// Get the value out of the select
var nameSelected = document.getElementById('number').value;
// Set the content of the output area to the corresponding index element:
document.getElementById('result').textContent = friends[nameSelected];
});
<select id = 'number' name = ''>
<option value = '0'>0</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>
</select>
<button id = 'go' class = ''>GO</button>
<!-- If you are just outputting a value, don't use a form element. -->
<span id="result"></span>
I have a program that generates a table rows based on part selections from a dropdown menu. On each row that is created, I have a <td> element that contains a dropdown for quantity. My problem is that when a new part is selected thus creating a new row, all my quantity dropdowns reset back to the default value of 1. I tried fixing it with "selected = true;" but that doesn't seem to work. Basically, I need to set the selected value of each quantity dropdown to stay as whatever selected value it was last set at when the user adds a new row. I'm using an ajax call to generate the data from a SQL table on each new row.
Here is the function which is called from the select dropdown. I've omitted a lot of unnecessary code:
function update(){
var selectLists = document.getElementsByName("qty_dropdown");
for(var i = 0; i < selectLists.length; i++){
var firstSelectList = selectLists[i].value;
}
}
Here is my dropdown:
<td>
<select name = "qty_dropdown" onChange = "update()">
<option value = '1'> 1 </option>
<option id = '2'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>
<option value ='10'> 10</option>
</td>
</select>
The function you are performing inside update() (i renamed it to add() ) should be performed on the addition of new row.
function add(){
var selectLists = document.getElementsByName("qty_dropdown");
var firstSelectList=[];
for(var i = 0; i < selectLists.length; i++){
firstSelectList.push(selectLists[i].value);
}
document.getElementById("inject").innerHTML+="<select name = 'qty_dropdown' onChange = 'update()'> <option value = '1'> 1 </option> <option id = '2'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> <option value ='10'> 10</option> </select> ";
for(var i = 0; i < selectLists.length-1;i++){
selectLists[i].value=firstSelectList[i];
}
}
this function add() will add a new row without resetting previous dropdown.
Demo : https://jsfiddle.net/0wur28ot/
What i did is save the value in array before adding new row and then i assigned values to the dropdown accordingly after row addition.
Here is one way you can do it. You can keep a variable around that keeps track of the most recently selected dropdown value, and when you add a new dropdown to the DOM, it will use that value as its initial value.
var lastUpdatedDropdownValue = "";
function update(event) {
lastUpdatedDropdownValue = event.target.value;
}
function addNewDropdown() {
var dropdown = document.querySelector("[name=qty_dropdown]");
var newDropdown = dropdown.cloneNode(true); // make sure no duplicate IDs. If your elements that are being cloned have IDs, remove them before re-inserting into the DOM
document.getElementById("dropdownContainer").append(newDropdown);
var selectedOption = newDropdown.querySelector("[value='" + lastUpdatedDropdownValue + "']");
selectedOption.selected = true;
}
<button onclick="addNewDropdown()">Add New Dropdown</button>
<div id="dropdownContainer">
<select name="qty_dropdown" onChange="update(event)">
<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>
<option value='10'>10</option>
</select>
</div>
I want to pass a variable from another page and have it effect the first select in a form on my current page. For example if my url is:
currentPage.html?classType=BATR1
I want the select to display the corresponding option.
This is what I am currently trying:
<script>
function setClassType(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n = url.replace(param+"=","");
document.getElementById(n).selected = true;
}
setClassType("classType");
</script>
<form>
<select>
<option id="test">Test</option>
<option id="BATR1">Backflow Assembly Tester Recertification 1-Day</option>
<option id="CCSC">Cross-Connection Specialist Update</option>
</select>
</form>
I have also tried this:
<script>
function setClassType(param) {
var val = document.URL;
var url = val.substr(val.indexOf(param))
var n = url.replace(param+"=","");
document.getElementById("courseType").value = n;
}
setClassType("classType");
</script>
<form>
<select id="courseType">
<option value="test">Test</option>
<option value="BATR1">Backflow Assembly Tester Recertification 1-Day</option>
<option value="CCSC">Cross-Connection Specialist Update</option>
</select>
</form>
I'm pretty much a beginner at scripting and I just can't seem to get it to work. Any help would be much appreciated!
I am trying to get my code to read a value based off the selected item from a select list in my form, but it says it's undefined. When I simply give the function a value and tell it to return the value, it reads, but won't take values from the form.
The following is the code I'm using
for the form (in html):
<form action="" id="orderForm" name="orderForm" onsubmit="return false;">
<select id="item" name='item' onchange="calculateCost()">
<option value="None">Select Item</option>
<option value="Candlestick">Candlestick ($10)</option>
<option value="Bowl">Bowl ($10)</option>
<option value="Burl_Bowl">Burl Bowl ($20)</option>
<option value="Clock">Clock ($15)</option>
<option value="Vase">Vase ($5)</option>
<option value="Pen">Pen ($2)</option>
<option value="Top">Spinning Top ($1)</option>
</select>
<div id="totalPrice">hallo</div>
</form>
and the javascript reads
function calculateCost()
{
var orderPrice = getItemPrice();
document.getElementById('totalPrice').innerHTML = orderPrice;
}
var item_prices= new Array();
item_prices["None"]=0;
item_prices["Candlestick"]=10;
item_prices["Bowl"]=10;
item_prices["Burl_Bowl"]=20;
item_prices["Clock"]=15;
item_prices["Vase"]=5;
item_prices["Pen"]=2;
item_prices["Top"]=1;
function getItemPrice()
{
var itemPrice = 0;
var theForm = document.forms["orderForm"];
var selectedItem = theForm.elements["item"];
itemPrice = item_prices[selectedItem.value];
return itemPrice;
}
HTMLCollection.item() is method of HTML select element Returns the specific node at the given zero-based index into the list. Returns null if the index is out of range.
theForm.elements["item"] will return function expression of the HTMLCollection.item and which is causing the undefined value as theForm.elements["item"] does not have property value
Either pass this in inline-event or use other id and name attribute to select element than item
function calculateCost(elem) {
var orderPrice = getItemPrice(elem.value);
document.getElementById('totalPrice').innerHTML = orderPrice;
}
var item_prices = [];
item_prices["None"] = 0;
item_prices["Candlestick"] = 10;
item_prices["Bowl"] = 10;
item_prices["Burl_Bowl"] = 20;
item_prices["Clock"] = 15;
item_prices["Vase"] = 5;
item_prices["Pen"] = 2;
item_prices["Top"] = 1;
function getItemPrice(val) {
var itemPrice = 0;
itemPrice = item_prices[val];
return itemPrice;
}
<form action="" id="orderForm" name="orderForm" onsubmit="return false;">
<select id="item" name='item' onchange="calculateCost(this)">
<option value="None">Select Item</option>
<option value="Candlestick">Candlestick ($10)</option>
<option value="Bowl">Bowl ($10)</option>
<option value="Burl_Bowl">Burl Bowl ($20)</option>
<option value="Clock">Clock ($15)</option>
<option value="Vase">Vase ($5)</option>
<option value="Pen">Pen ($2)</option>
<option value="Top">Spinning Top ($1)</option>
</select>
<div id="totalPrice">hallo</div>
</form>
Edit: Or just use getElementById => var selectedItem = document.getElementById('item'); to access the select element.Fiddle here
This entire operation could be simplified a bit as well.
var item_prices= new Array();
item_prices["None"]=0;
item_prices["Candlestick"]=10;
item_prices["Bowl"]=10;
item_prices["Burl_Bowl"]=20;
item_prices["Clock"]=15;
item_prices["Vase"]=5;
item_prices["Pen"]=2;
item_prices["Top"]=1;
EDIT, you should use an object here if you want to be correct.
item_prices = {
None: 0,
Candlestick: 10
};
// etc...
document.getElementById('item').addEventListener('change', function (event) {
document.getElementById('totalPrice').innerHTML = item_prices[event.target.value];
});
My first post so I hope I do this right and sorry I am still learning so not sure if I even post this correctly. What I kinda sort of did was pseudo code code what I need but the execution is way off.
So my variables are books, program, and courses.
To find my book cost I need to check to see what group the program falls in (arrays) then multiply it by the number of courses that are being taken.
var programGroup1=["Arts", "Crafts", "Painting"];
var programGroup2=["Zumba", "Ballet", "Jazz"];
var programGroup3=["Math", "Science", "History"];
var books
if(programGroup1){
books = course * 10
}else if(programGroup2){
books = course * 20
}else if(programGroup3){
books = course * 30
}else{
end();
}
<select id="program" name="program" >
<option value="" selected="true">--</option>
<option value="Arts" >Arts</option>
<option value="Crafts" >Crafts</option>
<option value="Painting" >Painting</option>
<option value="Zumba" >Zumba</option>
<option value="Ballet" >Ballet</option>
<option value="Jazz" >Jazz</option>
<option value="Math" >Math</option>
<option value="Science" >Science</option>
<option value="History" >History</option>
</select>
<select id="course" name="course">
<option value="" selected="true">--</option>
<option value="5">5</option>
<option value="4">4</option>
</select>
So then if you took Arts and course 5 your books would be 10 * 5 and it would output $50, or if you took crafts and course 5 it would be 20 * 5 and would output $100.
Thanks for any help I am really trying to learn just need some help.
Something like this:
// If a select changes
$('select').change(function () {
var psel, csel, program, course, total;
// Get the values of both selectors
psel = $('#Program').find('option:selected').val();
csel = $('#course').find('option:selected').val();
// Assign the program var a value depending on the program type
if (psel.indexOf('Arts') > -1) { program = 10; }
if (psel.indexOf('Crafts') > -1) { program = 20; }
// Set the value of course to the value of the selected option
course = csel;
// Add them together
total = program * course;
// And only if they all exists (if both selections have been done), alert the total
if (program && course && total) {
alert('Total ' + total);
}
});
Working demo.
You are best off doing something like this:
For each program, set an action and value, like this: $('option[value="Arts"]').data({ action:'*', value: 10 });
When one of the selects changes, get the value and action, and apply them to the cost.
Sample HTML:
<select id="program" name="program" >
<option value="" selected="true">--</option>
<option value="Arts" >Arts</option>
<option value="Arts2" >Art2s</option>
<option value="Arts3" >Arts3</option>
<option value="Crafts" >Crafts</option>
<option value="Crafts2" >Crafts2</option>
<option value="Crafts3" >Crafts3</option>
</select>
<select id="course" name="course">
<option value="0" selected="true">--</option>
<option value="5">5</option>
<option value="4">4</option>
</select>
Sample JS using jQuery:
$(function() {
$('#program option[value=""]').data({ action:'*', value: 0 });
$('option[value="Arts"]').data({ action:'*', value: 10 });
$('option[value="Arts2"]').data({ action:'*', value: 20 });
$('option[value="Arts3"]').data({ action:'*', value: 30 });
console.log($('option[value=Arts]').data());
$('select').on('change', function() {
var cost = parseFloat($('#course').val());
var program = $('#program').val();
var program_obj = $('#program option[value="'+program+'"');
var action = program_obj.data('action');
var arts_val = parseFloat(program_obj.data('value'));
switch(action) {
case '*':
cost = cost * arts_val;
break;
case '/':
cost = cost / arts_val;
break;
case '+':
cost = cost + arts_val;
break;
case '-':
cost = cost - arts_val;
break;
}
alert(cost);
});
});
Here's a working fiddle