We Keep Coding

create `select` element using javascript

I have an html table that I am creating dynamically its populating everything Accept select element I tried all the methods but its not working please have a look.
My complete code for table:-
function getreferData(dataArray) {
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
var ray = dataArray.splice(0, 1)
let table = document.getElementById('thead1');
var tableHeaderRow = document.createElement("tr");
table.appendChild(tableHeaderRow);
for (i = 0; i < ray[0].length; i++) {
var tableHeader = document.createElement("th");
tableHeaderRow.appendChild(tableHeader);
tableHeader.innerHTML = ray[0][i];
}
let tbody = document.getElementById('perf');
for (var i = 0; i < dataArray.length; i++) {
let row = document.createElement("tr")
for (var j = 0; j < dataArray[i].length; j++) {
if (j == 4) {
let col = document.createElement("td")
var a = document.createElement("a");
a.setAttribute("class", "light-blue-text text-light-blue")
a.href = dataArray[i][j];
var node = document.createTextNode("Click here")
a.appendChild(node)
col.appendChild(a)
row.appendChild(col)
} else if (j == 6) {
var col = document.createElement("td");
col.appendChild(createDropdown("status-" + dataArray[i]));
var lbl = document.createElement("label");
lbl.setAttribute("for", "status-" + dataArray[i]);
col.appendChild(lbl)
row.appendChild(col)
} else if (j == 7) {
let col = document.createElement("td")
var a2 = document.createElement("a");
a2.setAttribute("class", "btn blue-grey darken-3 waves-effect waves-light");
a2.setAttribute("onclick", "editrefrecord(\"" + dataArray[i] + "\")");
a2.setAttribute("style", "color: white");
var node2 = document.createTextNode("UPDATE");
a2.appendChild(node2);
col.appendChild(a2);
row.appendChild(col)
} else {
let col = document.createElement("td")
col.innerText = dataArray[i][j]
row.appendChild(col)
}
}
tbody.appendChild(row);
}
function createDropdown(id) {
//create a radio button
var fragment = document.createDocumentFragment();
var select = document.createElement('select');
select.setAttribute("id", id);
selectArray.forEach(function (r) {
select.options.add(new Option(r, r));
});
fragment.appendChild(select);
return fragment;
}
}
The only thing you would like to focus is:-
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
else if (j == 6) {
var col = document.createElement("td");
col.appendChild(createDropdown("status-" + dataArray[i]));
var lbl = document.createElement("label");
lbl.setAttribute("for", "status-" + dataArray[i]);
col.appendChild(lbl)
row.appendChild(col)
}
and the function to create select element :-
function createDropdown(id) {
//create a radio button
var fragment = document.createDocumentFragment();
var select = document.createElement('select');
select.setAttribute("id", id);
selectArray.forEach(function (r) {
select.options.add(new Option(r, r));
});
fragment.appendChild(select);
return fragment;
}
Currently My Html table looks like this and If you will see Status is not populating select option:-
The Inspect Element shows its created but its invisible:-

You Missed adding options
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);
//Create and append the options
for (var i = 0; i < selectArray.length; i++) {
var option = document.createElement("option");
option.value = selectArray[i];
option.text = selectArray[i];
selectList.appendChild(option);
}

onmouseover show only one submenu ( Javascript )

Good day,
trying to make a small menu only with Javascript and got a problem that onmouseover event shows all submenus and not only one.
this is the part of the code that suppose to change style.display to block.
var ul = document.getElementById("navMainId"),
var liDropdown = ul.getElementsByClassName("dropdown");
for (var i = 0; i < liDropdown.length; i++) {
liDropdown[i].style.display = "inline-block";
liDropdown[i].onmouseover = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "block";
}
}
liDropdown[i].onmouseleave = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "none";
}
}
}
How can i change the code to make it work ?
here is whole code on Fiddle ( ssry it is a mess ) : https://jsfiddle.net/apvsnzt5/1/

I've updated the fiddle:
https://jsfiddle.net/apvsnzt5/3/
All you needed to do was change
dropdown = ul.getElementsByClassName("dropdown-content");
to
dropdown = this.getElementsByClassName("dropdown-content");
So that it targets the "this" (being the LI you are hovered over) rather than finding the "dropdown-content" inside the UL.
Also do it on the onmouseleave.

Seems you have incorrect reference to container when mouser over. You need concrete content based on your mosue position.
var dropdown = this.getElementsByClassName("dropdown-content");
try updated fiddle

add the following to your css part
.dropdown-content{
display:none ! important;
}
a:hover+.dropdown-content{
display:block ! important;
}
it will works fine.
var menuCont = document.createElement("div");
document.body.appendChild(menuCont);
var ulMain = document.createElement("ul");
menuCont.appendChild(ulMain);
ulMain.className = "navMain";
ulMain.id = "navMainId";
/****** MENU ******/
// Software
var liSoftware = document.createElement("li");
liSoftware.className = "menu dropdown";
ulMain.appendChild(liSoftware);
var aSoftware = document.createElement("a");
aSoftware.className = "menuName dropbtn";
aSoftware.href = "#";
aSoftware.textContent = "Test1";
liSoftware.appendChild(aSoftware);
// GeCoSoft
var liGeco = document.createElement("li");
liGeco.className = "menu dropdown";
ulMain.appendChild(liGeco);
var aGeco = document.createElement("a");
aGeco.className = "menuName dropbtn";
aGeco.href = "#";
aGeco.textContent = "Test2";
liGeco.appendChild(aGeco);
/******* Submenu *******/
// Software Sub
var divSubSoft = document.createElement("div");
divSubSoft.className = "dropdown-content";
liSoftware.appendChild(divSubSoft);
var aSub1 = document.createElement("a"),
aSub2 = document.createElement("a");
aSub1.className = "menuSubName";
aSub1.textContent = "SubMenu1";
aSub1.href = "#";
aSub2.className = "menuSubName";
aSub2.textContent = "SubMenu2";
aSub2.href = "#";
divSubSoft.appendChild(aSub1);
divSubSoft.appendChild(aSub2);
// Gecosoft Sub
var divSubGeco = document.createElement("div");
divSubGeco.className = "dropdown-content";
liGeco.appendChild(divSubGeco);
var aSub3 = document.createElement("a"),
aSub4 = document.createElement("a");
aSub3.className = "menuSubName";
aSub3.textContent = "Submenu3";
aSub3.href = "#";
aSub4.className = "menuSubName";
aSub4.textContent = "SubMenu4"
aSub4.href = "#";
divSubGeco.appendChild(aSub3);
divSubGeco.appendChild(aSub4);
/****** MENU STYLE ******/
var i = "";
ulMain.style.listStyleType = "none";
ulMain.style.margin = "0px";
ulMain.style.padding = "0px";
ulMain.style.overflow = "hidden";
ulMain.style.backgroundColor = "rgb(232, 225, 225)";
var ul = document.getElementById("navMainId"),
li = ul.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].style.cssFloat = "left";
}
var a = ul.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].style.display = "inline-block";
a[i].style.color = "black";
a[i].style.textAlign = "center";
a[i].style.padding = "14px 16px";
a[i].style.textDecoration = "none";
a[i].onmouseover = function () {
this.style.backgroundColor = "rgb(174, 170, 170)";
}
a[i].onmouseleave = function () {
this.style.backgroundColor = "rgb(232, 225, 225)";
}
}
/************ Dont know what to do here **************/
var liDropdown = ul.getElementsByClassName("dropdown");
for (var i = 0; i < liDropdown.length; i++) {
liDropdown[i].style.display = "inline-block";
liDropdown[i].onmouseover = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "block";
}
}
liDropdown[i].onmouseleave = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "none";
}
}
}
var divDropCont = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < divDropCont.length; i++) {
divDropCont[i].style.display = "none";
divDropCont[i].style.position = "absolute";
divDropCont[i].style.backgroundColor = "#f9f9f9";
divDropCont[i].style.minWidth = "160px";
divDropCont[i].style.boxShadow = "0px 8px 16px 0px rgba(0,0,0,0.2)";
}
var aDropCont = ul.getElementsByClassName("menuSubName");
for (var i = 0; i < aDropCont.length; i++) {
aDropCont[i].style.color = "black";
aDropCont[i].style.padding = "12px 16px";
aDropCont[i].style.textDecoration = "none";
aDropCont[i].style.display = "block";
aDropCont[i].style.textAlign = "left";
aDropCont[i].onmouseover = function () {
this.style.backgroundColor = "rgb(174, 170, 170)";
}
aDropCont[i].onmouseleave = function () {
this.style.backgroundColor = "rgb(249, 249, 249)";
}
}
.dropdown-content{
display:none ! important;
}
a:hover+.dropdown-content{
display:block ! important;
}

Add onclick event to individual divs within loop

I am making a tic-tac-toe game.
I would like to add individual onclick event to each div so I can add either an "X" or an "O" depending on the div I click. "O" will be added later.
JavaScript:
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
document.body.appendChild(d);
//Stuck here -borrowed some of this from a similar topic-
d.onclick = function() {
return function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
d.appendChild(p);
}
}(i);
//-------------------------------------------------
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
html: <body onload="createDivs()">

Pass d as argument and accept it as argument so that closure will remember it when click handler-function will be executed.
d is nothing but the element you are creating(var d = document.createElement("DIV");)
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
d.style.float = 'left';
document.body.appendChild(d);
d.onclick = function(d) {
//----------------^^^ Accept d here
return function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
d.appendChild(p);
d.onclick = function() {}; //Unset function after click event
}
}(d);
//^^ Pass d here
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
div {
width: 30px;
height: 30px;
border: 1px solid black;
}
<body onload="createDivs()">
Update: As suggested by Barmar in comments, value of this in the event-handler function will be the element on which event registered.
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
d.style.float = 'left';
document.body.appendChild(d);
d.onclick = function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
this.appendChild(p);
this.onclick = function() {}; //Unset function after click event
};
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
div {
width: 30px;
height: 30px;
border: 1px solid black;
}
<body onload="createDivs()">

Image is not appearing inside the loop

I want an image to be added inside the table for every loop run.image is not appearing any help will be appreciated thank u
for (var i = 0; i < result.length; i++) {
doc1 = result[i];
if (doc1.PHOTO == "") {
var elem1 = document.createElement("img");
elem1.setAttribute("src", '../common/images/Icon-60.png');
elem1.setAttribute("height", "60");
elem1.setAttribute("width", "60");
var tbody = $("<tbody>").appendTo(table);
var tr = $("<tr>").appendTo(tbody);
var td = $("<td>").html(doc1.ENAME).data(doc1).appendTo(tr);
var tr2 = $("<tr>").appendTo(tbody);
var td2 = $("<td>").html(elem1).appendTo(tr2);
}

I'm not sure this will solve your problem, but try :
for (var i = 0; i < result.length; i++) {
var doc1 = result[i];
if (doc1.PHOTO == "") {
var elem1 = "<img src='../common/images/Icon-60.png' height='60' width='60'/>");
table.append('<tr><td data-name='+doc1+'>'+doc1.ENAME+'</td></tr><tr><td>'+elem1+'</td></tr>');
}
}
Hope this helps.

JavaScript onChange Event to use current row values only

An extension of my previous calculators, its now time to look at the onChange or addEventListener functions to run my code without using the submit buttons.
I am having a hard time trying to figure out how I can have the event fire once either the 'H' or 'Extra Room Factor' fields have been changed. I only want the row that is being edited / changed to fire the event, not the entire table. I am trying to figure out how I can 'find' which row / cell is calling the function and then use it in the script to get the other values required.
The script uses JSON to get data which determines how the table is set out.
The code should get the values from L, W and H and multiply them together. It should then multiply the Extra Room Factor and write the result into the 'Total Room M3' field.
(No Rep to post images)
Uh, I have all my code in a fiddle but the current code relies on JSON to get the details. I can't post the fiddle link due to low rep!
jsfiddleFiddle Link
JSON File
Thanks!
function init() {
var url = "http://localhost/javascript/comcool/working/data.json";
var request = new XMLHttpRequest();
request.open("GET", url);
request.send(null);
request.onload = function () {
if (request.status === 200) {
result = JSON.parse(request.responseText);
drawMainTable();
drawTable2();
drawTable3();
}
rooms = result.numberOfRooms;
};
}
function drawMainTable() {
var div = document.getElementById("calc");
var drawTable = document.createElement("table");
drawTable.id = "calcTable";
drawTable.className = "tg";
div.appendChild(drawTable);
var table = document.getElementById("calcTable");
//Draw Location Field
for ( var i = 0; i < result.locations.length ; i++ ) {
if ( result.locations[i].name !== null) {
var locations = document.getElementById("location");
var option = document.createElement("option");
option.value = result.locations[i].name;
option.text = result.locations[i].name;
locations.appendChild(option);
}
}
//Create Head Elements
for ( var i = 0; i < result.titles.length; i++ ) {
var createHead = document.createElement("th");
createHead.innerHTML = result.titles[i].name;
table.appendChild(createHead);
}
//Create Row Elements
for ( var i = 0; i < result.numberOfRooms ; i++ ) {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var roomInput = document.createElement("input");
roomInput.type = "text";
roomInput.id = "R" + i + "Name";
cell1.appendChild(roomInput);
var cell2 = row.insertCell(1);
var lInput = document.createElement("input");
lInput.type = "number";
lInput.id = "R" + i + "L";
lInput.className = "smallInput";
cell2.appendChild(lInput);
var cell3 = row.insertCell(2);
var wInput = document.createElement("input");
wInput.type = "number";
wInput.id = "R" + i + "W";
wInput.className = "smallInput";
cell3.appendChild(wInput);
var cell4 = row.insertCell(3);
var hInput = document.createElement("input");
hInput.type = "number";
hInput.id = "R" + i + "H";
hInput.onchange = calculateRoomM3;
hInput.className = "smallInput";
cell4.appendChild(hInput);
var cell5 = row.insertCell(4);
var extraRoomFactorInput = document.createElement("input");
extraRoomFactorInput.type = "number";
extraRoomFactorInput.id = "R" + i + "Factor";
extraRoomFactorInput.value = "1.0";
extraRoomFactorInput.step = "0.1";
extraRoomFactorInput.min = "1.0";
extraRoomFactorInput.max = "1.3";
cell5.appendChild(extraRoomFactorInput);
var cell6 = row.insertCell(5);
var m3Output = document.createElement("output");
m3Output.id = "R" + i + "M3Total";
cell6.appendChild(m3Output);
var cell7 = row.insertCell(6);
var suggDia = document.createElement("output");
suggDia.id = "R" + i + "Dia";
cell7.appendChild(suggDia);
var cell8 = row.insertCell(7);
var outSize = document.createElement("select");
outSize.id = "R" + i + "OutletSize";
cell8.appendChild(outSize);
for ( var x = 0; x < result.ductInfo.length ; x++ ) {
if ( result.ductInfo[x].ventSize != "nil") {
var option = document.createElement("option");
option.value = result.ductInfo[x].ventSize;
option.text = result.ductInfo[x].ventSize;
outSize.appendChild(option);
}
}
var cell9 = row.insertCell(8);
var ductDia = document.createElement("output");
ductDia.id = "R" + i + "DuctSize";
cell9.appendChild(ductDia);
}
}
function drawTable2() {
var p = document.getElementById("total");
var table = document.createElement("Table");
table.id = "totalTable";
table.className = "tg";
p.appendChild(table);
var tableBody = document.createElement('tbody');
table.appendChild(tableBody);
for (var i = 0; i < 3; i++){
var tr = document.createElement('TR');
var outputBox = document.createElement("output");
var inputBox = document.createElement("input");
tableBody.appendChild(tr);
var td = document.createElement('TD');
if ( i === 0 ) {
td.appendChild(document.createTextNode("Total M3 All Rooms:"));
} else if ( i == 1 ) {
td.appendChild(document.createTextNode("Extra House Heat Load:"));
} else if ( i == 2 ) {
td.appendChild(document.createTextNode("Total System m3 Required:"));
}
tr.appendChild(td);
var td = document.createElement('TD');
if ( i === 0 ) {
outputBox.id = "HouseM3Total";
td.appendChild(outputBox);
} else if ( i == 1 ) {
inputBox.type = "number";
inputBox.id = "HouseHeatLoad";
inputBox.value = "1.0";
inputBox.step = "0.1";
inputBox.min = "1.0";
inputBox.max = "1.3";
td.appendChild(inputBox);
} else if ( i == 2 ) {
outputBox.id = "HouseAdjustM3Total";
td.appendChild(outputBox);
}
tr.appendChild(td);
}
}
function drawTable3() {
var div = document.getElementById("dropper");
//create table
var drawTable = document.createElement("table");
drawTable.id = "dropperTable";
drawTable.className = "tg";
div.appendChild(drawTable);
var table = document.getElementById("dropperTable");
//Create Head Elements
for ( var i = 0; i < 3; i++ ) {
var createHead = document.createElement("th");
if ( i === 0) {
createHead.innerHTML = "";
} else if ( i === 1) {
createHead.innerHTML = "Dropper Duct Size";
} else if ( i === 2) {
createHead.innerHTML = "Dropper Duct Capacity";
}
table.appendChild(createHead);
}
for ( var i = 0; i < 6 ; i++ ) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var dropperName = document.createElement("output");
dropperName.innerHTML = "Dropper Duct Side " + [i + 1];
cell1.appendChild(dropperName);
var cell2 = row.insertCell(1);
var dropperInput = document.createElement("input");
dropperInput.type = "number";
dropperInput.id = "D" + [i] + "Size";
cell2.appendChild(dropperInput);
var cell3 = row.insertCell(2);
var dropperOutput = document.createElement("output");
dropperOutput.id = "D" + [i] + "Capacity";
cell3.appendChild(dropperOutput);
}
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var designCapacity = document.createElement("output");
designCapacity.colSpan = "2";
designCapacity.innerHTML = "Design Dropper Capacity";
cell1.colSpan = "2";
cell1.appendChild(designCapacity);
var cell2 = row.insertCell(1);
var DTotalCapacity = document.createElement("output");
DTotalCapacity.id = "DTotalCapacity";
cell2.appendChild(DTotalCapacity);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var modelCapacity = document.createElement("output");
modelCapacity.innerHTML = "Model Dropper Capacity";
cell1.colSpan = "2";
cell1.appendChild(modelCapacity);
var cell2 = row.insertCell(1);
var dropperCapacityUnit = document.createElement("output");
dropperCapacityUnit.id = "dropperCapacityUnit";
cell2.appendChild(dropperCapacityUnit);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var modelSelect = document.createElement("output");
modelSelect.innerHTML = "Model Selection";
cell1.colSpan = "2";
cell1.appendChild(modelSelect);
var cell2 = row.insertCell(1);
var model = document.createElement("output");
model.id = "model";
cell2.appendChild(model);
}
function startCalculate() {
getLocationValue = 0;
totalHouseM3 = 0;
findLocation();
calculateTotalM3();
calculateDuctDia();
findUnitSpecs();
return;
}
function dropperCalculate() {
calculateDropperDia();
finalUnitCalc();
}
function replaceWithDropdownModel( id , valueList ){
var element = document.getElementById( id );
var dropdown = document.createElement("select"),
value = element.value,
option;
dropdown.id = id;
for( var i = 0 ; i < valueList.length ; i++ ){
option = document.createElement("option");
option.text = valueList[i];
option.value = valueList[i];
if( option.value == value){
option.selected = true;
}
dropdown.options.add(option);
}
element.parentNode.replaceChild( dropdown , element );
}
function findLocation() {
var getLocationFactor = document.getElementById("location").value;
for ( var i = 0 ; i < result.locations.length ; i++) {
if (result.locations[i].name === getLocationFactor) {
getLocationValue = result.locations[i].factor;
}
}
}
function calculateTotalM3() {
for ( var i = 0; i < rooms ; i++ ) {
var roomL = document.getElementById("R" + i + "L").value,
roomW = document.getElementById("R" + i + "W").value,
roomH = document.getElementById("R" + i + "H").value,
roomFactor = document.getElementById("R" + i + "Factor").value,
ductDia = document.getElementById("R" + i + "Dia"),
calcM3 = Math.round((roomL * roomW * roomH) * roomFactor);
var outputRoomM3 = document.getElementById("R" + i + "M3Total");
outputRoomM3.innerHTML = calcM3;
totalHouseM3 = totalHouseM3 + calcM3;
var inputHouseHeatLoad = document.getElementById("HouseHeatLoad").value;
var outputHouseM3 = document.getElementById("HouseM3Total");
outputHouseM3.innerHTML = totalHouseM3 + " m3";
for ( var x = 0; x < result.ductInfo.length; x++) {
if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc1 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc1 && getLocationValue === 1) {
ductDia.innerHTML = result.ductInfo[x].ductSize;
} else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc2 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc2 && getLocationValue === 2) {
ductDia.innerHTML = result.ductInfo[x].ductSize;
} else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc3 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc3 && getLocationValue === 3) {
ductDia.innerHTML = result.ductInfo[x].ductSize;
} else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc4 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc4 && getLocationValue === 4) {
ductDia.innerHTML = result.ductInfo[x].ductSize;
} else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc5 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc5 && getLocationValue === 5) {
ductDia.innerHTML = result.ductInfo[x].ductSize;
}
}
}
var totalHouseM32 = Math.round(totalHouseM3 * inputHouseHeatLoad);
var outputAdjHouseM3 = document.getElementById("HouseAdjustM3Total");
outputAdjHouseM3.innerHTML = totalHouseM32 + " m3";
}
function calculateDuctDia() {
for ( var i = 0; i < rooms ; i++ ) {
var outletSize = document.getElementById("R" + [i] + "OutletSize").value;
var outputDuctSize = document.getElementById("R" + [i] + "DuctSize");
var diaResult;
for ( var x = 0; x < result.ductInfo.length ; x++) {
if (result.ductInfo[x].ventSize == outletSize) {
diaResult = result.ductInfo[x].ventSize;
}
}
outputDuctSize.innerHTML = diaResult;
}
}
function findUnitSpecs() {
unitArray = [];
for ( var x = 0 ; x < result.modelFinder.length; x++) {
if (totalHouseM3 <= result.modelFinder[x].location1Capacity && getLocationValue === 1) {
unitArray.push(result.modelFinder[x].model);
} else if (totalHouseM3 <= result.modelFinder[x].location2Capacity && getLocationValue === 2) {
unitArray.push(result.modelFinder[x].model);
} else if (totalHouseM3 <= result.modelFinder[x].location3Capacity && getLocationValue === 3) {
unitArray.push(result.modelFinder[x].model);
} else if (totalHouseM3 <= result.modelFinder[x].location4Capacity && getLocationValue === 4) {
unitArray.push(result.modelFinder[x].model);
} else if (totalHouseM3 <= result.modelFinder[x].location5Capacity && getLocationValue === 5) {
unitArray.push(result.modelFinder[x].model);
}
replaceWithDropdownModel( "model" , unitArray);
}
return [
unitArray
];
}
function calculateDropperDia() {
totalDropperCapacity = 0;
dropperSides = 6;
for ( var i = 0; i < dropperSides ; i++ ) {
var dropperSize = document.getElementById("D" + i + "Size").value,
outputDropperCapacity = document.getElementById("D" + i + "Capacity");
var dropperResult;
for ( var x = 0; x < result.ductInfo.length ; x++) {
if (result.ductInfo[x].ductSize == dropperSize) {
dropperResult = result.ductInfo[x].dropperCapacity;
} else if (dropperSize > 551) {
dropperResult = "Size Does Not Exist";
}
}
outputDropperCapacity.innerHTML = dropperResult;
var dropperCapacityElement = document.getElementById("DTotalCapacity");
totalDropperCapacity = totalDropperCapacity + dropperResult;
dropperCapacityElement.innerHTML = totalDropperCapacity;
}
}
function finalUnitCalc() {
var selectedUnit = document.getElementById("model").value,
dropperCapacityUnit = document.getElementById("dropperCapacityUnit");
for ( var i = 0 ; i < result.modelFinder.length ; i++) {
if (selectedUnit === result.modelFinder[i].model) {
dropperCapacityUnit.innerHTML = result.modelFinder[i].dropperCapacity;
}
}
}
window.onload = init;
function calculateRoomM3() {
// iterate through all current rows and get the values of each, save it as a variable in each and then calculate
//
var table = document.getElementById("calcTable");
var rowCount = table.rows[0].cells[1].childNodes[0].value;
console.log(rowCount);
// var roomL =
// roomW =
// roomH =
// roomFactor =
// roomTotal =
// var thisID = document.getElementById(thisID).value,
//thisW = document.getElementById(thisW).value,
//thisL = document.getElementById(thisL).value,
//thisFactor = document.getElementById(thisFactor).value,
//thisTotal = document.getElementById(thisTotal);
//var roomM3 = Math.round((thisL * thisW * thisID)) * thisFactor;
//thisTotal.innerHTML = roomM3;
//console.log(thisID);
//console.log(thisW);
//console.log(thisL);
//console.log(roomM3);
}
#calc{
width: 850px;
margin-bottom: 1em;
}
div {
border: 1px solid white;
}
#dropper {
width: 400px;
position: absolute;
margin-left: 875px;
}
#total {
clear: both;
}
#button2 {
position:absolute;
margin-left: 875px;
margin-top: -250px;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
input {
text-align: center;
}
.tg {
border-collapse:collapse;
border-spacing:0;
text-align: center;
}
.tg td{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
text-align: center;
}
.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
text-align: center;
vertical-align: top;
}
.tg .tg-s6z2{
text-align:center
}
.smallInput {
width: 50px;
text-align: center;
}
.factors {
text-align: center;
width: 80px;
}
.factors2 {
text-align: center;
width: 150px;
}
.tg2 {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="ComCool.js" type="text/javascript"></script>
<meta charset="utf-8">
</head>
<body>
<form>
<div id="dropper">
<h1>Dropper Duct Calculator</h1><br>
<br>
</div>
<div id="calc">
<h1>Calculator</h1>
<p>Location: <select id="location">
</select></p>
</div>
</form>
<div id="total"></div>
<br/>
<div id="button2">
<input onclick="startCalculate()" type="button" value=
"1. Calculate M3, Diameter (Suggested and Actual)">
<br/></br>
<input onclick="dropperCalculate()" type="button" value=
"2. Calculate Dropper"><br>
</div>
<br>
</body>
</html>

I solved this for now by getting the entire ID of the current cell the event runs from, then splicing to get the ID scheme that I have through the table.
var str = this.id,
slice = str.slice(0,2),
roomL = slice + "L",
roomW = slice + "W",
roomH = slice + "H",
roomFactor = slice + "Factor",
roomTotal = slice + "M3Total",
roomDuctDia = slice + "Dia",
Its a quick solve, but it works!