We Keep Coding

Slicing elements from three select menus into and out of array

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var array = [];
let sel1 = false;
function myFunct1() {
var one = select1.options[select1.selectedIndex].value;
if(array.length === 1 && !sel1) array.unshift(one);
else array.splice(0,1,one);
console.log(array);
sel1 = true;
}
function myFunct2() {
var two = select2.options[select2.selectedIndex].value;
array.splice(sel1, 1, two);
console.log(array);
}
function myFunct3() {
var three = select3.options[select3.selectedIndex].value;
}
<select id = 'select1' onchange = 'myFunct1()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog1'>Dog</option>
<option value = 'Cat1'>Cat</option>
<option value = 'Bear1'>Bear</option>
</select>
<select id = 'select2' onchange = 'myFunct2()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog2'>Dog</option>
<option value = 'Cat2'>Cat</option>
<option value = 'Bear2'>Bear</option>
</select>
<select id = 'select3' onchange = 'myFunct3()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog3'>Dog</option>
<option value = 'Cat3'>Cat</option>
<option value = 'Bear3'>Bear</option>
</select>
I have this method that works exactly how I want it with two select menus. So if you select twice in a row from the second select the array's length is never more than one until you select from the first. Now I want to incorporate a third select menu. Please help me make this work. I'm aware I could combine them all into one function and not have to deal with these issues but for my use, I can't do that. The main condition is that there is never multiple selections within the array from the same select menu and never any empty positions within the array that still count towards its length. so an array of [undefined, Cat2] does not occur.

The simple way is:
Create two arrays i.e realArr(to keep strings at original indexes). For example value from select1 will always we set to realArr[0] and from select2 to realArr[1]...
Second array showArr is array from which you will remove undefined using filter()
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var select3= document.getElementById('select3');
var realArr = [];
var showArr = [];
function myFunct1() {
var one = select1.options[select1.selectedIndex].value;
realArr[0] = one;
showArr = realArr.filter(x => x !== undefined);
console.log(showArr);
}
function myFunct2() {
var two = select2.options[select2.selectedIndex].value;
realArr[1] = two
showArr = realArr.filter(x => x !== undefined);
console.log(showArr);
}
function myFunct3() {
var three = select3.options[select3.selectedIndex].value;
realArr[2] = three;
showArr = realArr.filter(x => x !== undefined);
console.log(showArr);
}
<select id = 'select1' onchange = 'myFunct1()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog1'>Dog</option>
<option value = 'Cat1'>Cat</option>
<option value = 'Bear1'>Bear</option>
</select>
<select id = 'select2' onchange = 'myFunct2()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog2'>Dog</option>
<option value = 'Cat2'>Cat</option>
<option value = 'Bear2'>Bear</option>
</select>
<select id = 'select3' onchange = 'myFunct3()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog3'>Dog</option>
<option value = 'Cat3'>Cat</option>
<option value = 'Bear3'>Bear</option>
</select>

How to set the default value on select dropdowns with javascript after AJAX call

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>

Javascript won't read from "select" in a form

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];
});

accessing global variables after setting them javascript

I am trying to keep track of changes to a select box in django. My code below is working up to alert(change.new_time);, so I am making the object correctly-
var changed_select_box_array = [];
function handleChanges(id){
var x = document.getElementById(id).selectedIndex;
var time = document.getElementsByTagName("option")[x].value;
var change = {id:id, new_time:time};
alert(change.id);
alert(change.new_time);
changed_select_box_array[changed_select_box_array.length] = change;
alert(changed_select_box_array[0].id);
}
but I cannot access the new item in the array. I tried 4-5 different ways and followed some rules for global variables in funcs I found on this site, and I cannot access anything from the new array. Am I doing something wrong adding to the array? I tried push too. Thank you

You can use Object as associative array.
var changed_select_box_array = {};
function handleChanges() {
var x = this.selectedIndex;
var id = this.id;
var time = this.getElementsByTagName("option")[x].value;
var change = { id: id, new_time: time };
changed_select_box_array[id] = change;
console.log(changed_select_box_array);
}
<!--Emitation of some select inputs with change events-->
<select id="s1" onchange="handleChanges.call(this)">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<select id="s2" onchange="handleChanges.call(this)">
<option value="val4">Value 1</option>
<option value="val5">Value 2</option>
<option value="val6">Value 3</option>
</select>

JavaScript NaN Error

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>