1
我以前的計算器的擴展，現在可以查看onChange或addEventListener函數來運行我的代碼，而無需使用提交按鈕。JavaScript onChange事件僅使用當前行值
我很難試圖弄清楚'H'或'Extra Room Factor'字段被更改後我怎麼會觸發事件。我只希望正在編輯/更改的行觸發事件，而不是整個表。我想知道如何'找到'哪個行/單元正在調用該函數，然後在腳本中使用它來獲取所需的其他值。
該腳本使用JSON來獲取確定如何設置表格的數據。
代碼應該從L，W和H中獲取值並將它們相乘。然後它應該乘以Extra Room Factor並將結果寫入'Total Room M3'字段。
（無衆議員張貼圖片）
呃，我有我的小提琴所有的代碼，但當前的代碼依賴於JSON瞭解詳細內容。由於低代表我無法發佈小提琴鏈接！
jsfiddleFiddle Link
JSON File 謝謝！
function init() {
\t var url = "http://localhost/javascript/comcool/working/data.json";
\t var request = new XMLHttpRequest();
\t request.open("GET", url);
\t request.send(null);
\t request.onload = function() {
\t \t if (request.status === 200) {
\t \t \t result = JSON.parse(request.responseText);
\t \t \t drawMainTable();
\t \t \t drawTable2();
\t \t \t drawTable3();
\t \t }
\t rooms = result.numberOfRooms;
\t }; \t
}
function drawMainTable() {
\t
\t var div = document.getElementById("calc");
\t
\t var drawTable = document.createElement("table");
\t \t drawTable.id = "calcTable";
\t \t drawTable.className = "tg";
\t \t div.appendChild(drawTable);
\t \t
\t var table = document.getElementById("calcTable");
\t \t //Draw Location Field
\t \t for (var i = 0; i < result.locations.length ; i++) {
\t \t \t if (result.locations[i].name !== null) {
\t \t \t \t var locations = document.getElementById("location");
\t \t \t \t var option = document.createElement("option");
\t \t \t \t option.value = result.locations[i].name;
\t \t \t \t option.text = result.locations[i].name;
\t \t \t \t locations.appendChild(option);
\t \t \t }
\t \t }
\t \t
\t \t //Create Head Elements
\t \t for (var i = 0; i < result.titles.length; i++) {
\t \t var createHead = document.createElement("th");
\t \t \t createHead.innerHTML = result.titles[i].name;
\t \t \t table.appendChild(createHead);
\t \t \t }
\t \t \t
\t \t //Create Row Elements
\t \t 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";
\t \t \t lInput.className = "smallInput";
cell2.appendChild(lInput);
var cell3 = row.insertCell(2);
var wInput = document.createElement("input");
wInput.type = "number";
wInput.id = "R" + i + "W";
\t \t \t wInput.className = "smallInput";
cell3.appendChild(wInput);
\t \t \t
\t \t \t var cell4 = row.insertCell(3);
var hInput = document.createElement("input");
hInput.type = "number";
hInput.id = "R" + i + "H";
\t \t \t hInput.onchange = calculateRoomM3;
\t \t \t hInput.className = "smallInput";
cell4.appendChild(hInput);
\t \t \t var cell5 = row.insertCell(4);
var extraRoomFactorInput = document.createElement("input");
extraRoomFactorInput.type = "number";
extraRoomFactorInput.id = "R" + i + "Factor";
\t \t \t extraRoomFactorInput.value = "1.0";
\t \t \t extraRoomFactorInput.step = "0.1";
\t \t \t extraRoomFactorInput.min = "1.0";
\t \t \t extraRoomFactorInput.max = "1.3";
cell5.appendChild(extraRoomFactorInput);
\t \t \t
\t \t \t var cell6 = row.insertCell(5);
var m3Output = document.createElement("output");
m3Output.id = "R" + i + "M3Total";
cell6.appendChild(m3Output);
\t \t \t
\t \t \t var cell7 = row.insertCell(6);
var suggDia = document.createElement("output");
suggDia.id = "R" + i + "Dia";
cell7.appendChild(suggDia);
\t \t \t
\t \t \t var cell8 = row.insertCell(7);
var outSize = document.createElement("select");
outSize.id = "R" + i + "OutletSize";
cell8.appendChild(outSize);
\t \t
\t \t \t \t for (var x = 0; x < result.ductInfo.length ; x++) {
\t \t \t \t \t if (result.ductInfo[x].ventSize != "nil") {
\t \t \t \t \t \t var option = document.createElement("option");
\t \t \t \t \t \t option.value = result.ductInfo[x].ventSize;
\t \t \t \t \t \t option.text = result.ductInfo[x].ventSize;
\t \t \t \t \t \t outSize.appendChild(option);
\t \t \t \t \t }
\t \t \t \t }
\t \t \t
\t \t \t var cell9 = row.insertCell(8);
var ductDia = document.createElement("output");
ductDia.id = "R" + i + "DuctSize";
cell9.appendChild(ductDia);
\t \t } \t
}
function drawTable2() {
\t
\t var p = document.getElementById("total");
\t
\t var table = document.createElement("Table");
\t \t table.id = "totalTable";
\t \t table.className = "tg";
\t \t p.appendChild(table);
var tableBody = document.createElement('tbody');
table.appendChild(tableBody);
\t
\t \t for (var i = 0; i < 3; i++){
\t \t \t var tr = document.createElement('TR');
\t \t \t var outputBox = document.createElement("output");
\t \t \t var inputBox = document.createElement("input");
\t \t
\t \t \t tableBody.appendChild(tr);
\t
\t \t \t var td = document.createElement('TD');
\t \t \t \t if (i === 0) {
\t \t \t \t \t td.appendChild(document.createTextNode("Total M3 All Rooms:"));
\t \t \t \t } else if (i == 1) {
\t \t \t \t \t td.appendChild(document.createTextNode("Extra House Heat Load:"));
\t \t \t \t } else if (i == 2) {
\t \t \t \t \t td.appendChild(document.createTextNode("Total System m3 Required:"));
\t \t \t \t }
\t \t \t tr.appendChild(td);
\t \t
\t \t \t var td = document.createElement('TD');
\t \t \t \t if (i === 0) {
\t \t \t \t \t outputBox.id = "HouseM3Total";
\t \t \t \t \t td.appendChild(outputBox);
\t \t \t \t } else if (i == 1) {
\t \t \t \t \t inputBox.type = "number";
\t \t \t \t \t inputBox.id = "HouseHeatLoad";
\t \t \t \t \t inputBox.value = "1.0";
\t \t \t \t \t inputBox.step = "0.1";
\t \t \t \t \t inputBox.min = "1.0";
\t \t \t \t \t inputBox.max = "1.3";
\t \t \t \t \t td.appendChild(inputBox);
\t \t \t \t } else if (i == 2) {
\t \t \t \t \t outputBox.id = "HouseAdjustM3Total";
\t \t \t \t \t td.appendChild(outputBox);
\t \t \t \t }
\t \t tr.appendChild(td);
\t \t }
}
\t
function drawTable3() {
\t
\t var div = document.getElementById("dropper");
\t
\t //create table
\t var drawTable = document.createElement("table");
\t \t drawTable.id = "dropperTable";
\t \t drawTable.className = "tg";
\t \t div.appendChild(drawTable);
\t var table = document.getElementById("dropperTable"); \t \t
\t \t
\t //Create Head Elements
\t for (var i = 0; i < 3; i++) {
\t \t var createHead = document.createElement("th");
\t \t \t if (i === 0) {
\t \t \t \t createHead.innerHTML = "";
\t \t \t } else if (i === 1) {
\t \t \t \t createHead.innerHTML = "Dropper Duct Size";
\t \t \t } else if (i === 2) {
\t \t \t \t createHead.innerHTML = "Dropper Duct Capacity";
\t \t \t }
\t \t \t table.appendChild(createHead);
\t } \t
\t for (var i = 0; i < 6 ; i++) {
\t
\t var rowCount = table.rows.length;
\t var row = table.insertRow(rowCount);
\t
\t \t var cell1 = row.insertCell(0);
\t \t var dropperName = document.createElement("output");
\t \t \t dropperName.innerHTML = "Dropper Duct Side " + [i + 1];
\t \t \t cell1.appendChild(dropperName); \t \t
\t \t var cell2 = row.insertCell(1);
\t \t var dropperInput = document.createElement("input");
\t \t \t dropperInput.type = "number";
\t \t \t dropperInput.id = "D" + [i] + "Size";
\t \t \t cell2.appendChild(dropperInput);
\t \t
\t \t var cell3 = row.insertCell(2);
\t \t var dropperOutput = document.createElement("output");
\t \t \t dropperOutput.id = "D" + [i] + "Capacity";
\t \t \t cell3.appendChild(dropperOutput); \t
\t
\t }
\t
\t var rowCount = table.rows.length;
\t var row = table.insertRow(rowCount);
\t
\t \t var cell1 = row.insertCell(0);
\t \t var designCapacity = document.createElement("output");
\t \t \t designCapacity.colSpan = "2";
\t \t \t designCapacity.innerHTML = "Design Dropper Capacity";
\t \t \t cell1.colSpan = "2";
\t \t \t cell1.appendChild(designCapacity);
\t \t \t
\t \t var cell2 = row.insertCell(1);
\t \t var DTotalCapacity = document.createElement("output");
\t \t \t DTotalCapacity.id = "DTotalCapacity"; \t
\t \t \t cell2.appendChild(DTotalCapacity);
\t
\t var rowCount = table.rows.length;
\t var row = table.insertRow(rowCount);
\t
\t \t var cell1 = row.insertCell(0);
\t \t var modelCapacity = document.createElement("output");
\t \t \t modelCapacity.innerHTML = "Model Dropper Capacity";
\t \t \t cell1.colSpan = "2";
\t \t \t cell1.appendChild(modelCapacity);
\t \t \t
\t \t var cell2 = row.insertCell(1);
\t \t var dropperCapacityUnit = document.createElement("output");
\t \t \t dropperCapacityUnit.id = "dropperCapacityUnit";
\t \t \t cell2.appendChild(dropperCapacityUnit);
\t var rowCount = table.rows.length;
\t var row = table.insertRow(rowCount);
\t
\t \t var cell1 = row.insertCell(0);
\t \t var modelSelect = document.createElement("output");
\t \t \t modelSelect.innerHTML = "Model Selection";
\t \t \t cell1.colSpan = "2";
\t \t \t cell1.appendChild(modelSelect);
\t \t \t
\t \t var cell2 = row.insertCell(1);
\t \t var model = document.createElement("output");
\t \t \t model.id = "model";
\t \t \t cell2.appendChild(model); \t \t \t \t \t
}
\t
function startCalculate() {
\t \t
\t \t getLocationValue = 0;
\t \t totalHouseM3 = 0;
\t \t findLocation();
\t \t calculateTotalM3();
\t \t calculateDuctDia();
\t \t findUnitSpecs();
\t \t
\t \t return;
}
function dropperCalculate() {
\t \t calculateDropperDia();
\t \t 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() {
\t var getLocationFactor = document.getElementById("location").value;
\t
\t for (var i = 0 ; i < result.locations.length ; i++) {
\t \t if (result.locations[i].name === getLocationFactor) {
\t \t getLocationValue = result.locations[i].factor;
\t \t } \t
\t }
}
function calculateTotalM3() {
\t for (var i = 0; i < rooms ; i++) {
\t var roomL = document.getElementById("R" + i + "L").value,
\t \t roomW = document.getElementById("R" + i + "W").value,
\t \t roomH = document.getElementById("R" + i + "H").value,
\t \t roomFactor = document.getElementById("R" + i + "Factor").value,
\t \t ductDia = document.getElementById("R" + i + "Dia"),
\t \t calcM3 = Math.round((roomL * roomW * roomH) * roomFactor);
\t \t
\t var \t outputRoomM3 = document.getElementById("R" + i + "M3Total");
\t \t outputRoomM3.innerHTML = calcM3;
\t \t
\t \t totalHouseM3 = totalHouseM3 + calcM3;
\t \t \t
\t var inputHouseHeatLoad = document.getElementById("HouseHeatLoad").value;
\t var \t outputHouseM3 = document.getElementById("HouseM3Total");
\t \t outputHouseM3.innerHTML = totalHouseM3 + " m3";
\t \t
\t \t for (var x = 0; x < result.ductInfo.length; x++) {
\t \t \t if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc1 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc1 && getLocationValue === 1) {
\t \t \t \t ductDia.innerHTML = result.ductInfo[x].ductSize;
\t \t \t } else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc2 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc2 && getLocationValue === 2) {
\t \t \t \t ductDia.innerHTML = result.ductInfo[x].ductSize;
\t \t \t } else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc3 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc3 && getLocationValue === 3) {
\t \t \t \t ductDia.innerHTML = result.ductInfo[x].ductSize;
\t \t \t } else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc4 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc4 && getLocationValue === 4) {
\t \t \t \t ductDia.innerHTML = result.ductInfo[x].ductSize;
\t \t \t } else if (calcM3 >= result.ductInfo[x].roomDuctSizeLoc5 && calcM3 <= result.ductInfo[x + 1].roomDuctSizeLoc5 && getLocationValue === 5) {
\t \t \t \t ductDia.innerHTML = result.ductInfo[x].ductSize;
\t \t \t } \t \t \t
\t \t } \t \t \t
\t }
\t var \t totalHouseM32 = Math.round(totalHouseM3 * inputHouseHeatLoad);
\t \t
\t var outputAdjHouseM3 = document.getElementById("HouseAdjustM3Total");
\t \t outputAdjHouseM3.innerHTML = totalHouseM32 + " m3";
}
function calculateDuctDia() {
\t for (var i = 0; i < rooms ; i++) {
\t var outletSize = document.getElementById("R" + [i] + "OutletSize").value;
\t var outputDuctSize = document.getElementById("R" + [i] + "DuctSize");
\t var diaResult;
\t
\t \t for (var x = 0; x < result.ductInfo.length ; x++) {
\t \t \t if (result.ductInfo[x].ventSize == outletSize) {
\t \t \t \t diaResult = result.ductInfo[x].ventSize;
\t \t \t }
\t \t }
\t
\t outputDuctSize.innerHTML = diaResult; \t
\t }
}
function findUnitSpecs() {
\t unitArray = [];
\t
\t for (var x = 0 ; x < result.modelFinder.length; x++) {
\t \t if (totalHouseM3 <= result.modelFinder[x].location1Capacity && getLocationValue === 1) {
\t \t unitArray.push(result.modelFinder[x].model);
\t \t } else if (totalHouseM3 <= result.modelFinder[x].location2Capacity && getLocationValue === 2) {
\t \t unitArray.push(result.modelFinder[x].model);
\t \t } else if (totalHouseM3 <= result.modelFinder[x].location3Capacity && getLocationValue === 3) {
\t \t unitArray.push(result.modelFinder[x].model);
\t \t } else if (totalHouseM3 <= result.modelFinder[x].location4Capacity && getLocationValue === 4) {
\t \t unitArray.push(result.modelFinder[x].model);
\t \t } else if (totalHouseM3 <= result.modelFinder[x].location5Capacity && getLocationValue === 5) {
\t \t unitArray.push(result.modelFinder[x].model);
\t \t }
\t \t replaceWithDropdownModel("model" , unitArray);
\t }
\t
\t return [
\t unitArray
\t ];
\t
}
\t
function calculateDropperDia() {
\t \t
\t \t totalDropperCapacity = 0;
\t \t dropperSides = 6;
\t \t
\t for (var i = 0; i < dropperSides ; i++) {
\t \t var dropperSize = document.getElementById("D" + i + "Size").value,
\t \t \t outputDropperCapacity = document.getElementById("D" + i + "Capacity");
\t \t var \t dropperResult;
\t
\t \t \t for (var x = 0; x < result.ductInfo.length ; x++) {
\t \t \t \t if (result.ductInfo[x].ductSize == dropperSize) {
\t \t \t \t \t dropperResult = result.ductInfo[x].dropperCapacity;
\t \t \t \t } else if (dropperSize > 551) {
\t \t \t \t \t dropperResult = "Size Does Not Exist";
\t \t \t \t }
\t \t \t
\t \t \t }
\t \t outputDropperCapacity.innerHTML = dropperResult; \t
\t
\t \t var dropperCapacityElement = document.getElementById("DTotalCapacity");
\t \t totalDropperCapacity = totalDropperCapacity + dropperResult;
\t
\t \t dropperCapacityElement.innerHTML = totalDropperCapacity; \t
\t }
}
function finalUnitCalc() {
\t \t
\t var selectedUnit = document.getElementById("model").value,
\t \t dropperCapacityUnit = document.getElementById("dropperCapacityUnit");
\t
\t for (var i = 0 ; i < result.modelFinder.length ; i++) {
\t \t \t if (selectedUnit === result.modelFinder[i].model) {
\t \t \t dropperCapacityUnit.innerHTML = result.modelFinder[i].dropperCapacity;
\t \t \t }
\t }
}
window.onload = init;
function calculateRoomM3() {
\t
\t // iterate through all current rows and get the values of each, save it as a variable in each and then calculate
\t //
\t var table = document.getElementById("calcTable");
\t var rowCount = table.rows[0].cells[1].childNodes[0].value;
\t console.log(rowCount);
\t
// \t var roomL =
// \t \t roomW =
// \t \t roomH =
// \t \t roomFactor =
// \t \t roomTotal =
\t \t
\t \t
// \t var \t thisID = document.getElementById(thisID).value,
\t \t //thisW = document.getElementById(thisW).value,
\t \t //thisL = document.getElementById(thisL).value,
\t \t //thisFactor = document.getElementById(thisFactor).value,
\t \t //thisTotal = document.getElementById(thisTotal);
\t \t
\t //var roomM3 = Math.round((thisL * thisW * thisID)) * thisFactor;
\t \t
\t \t //thisTotal.innerHTML = roomM3;
\t \t
\t \t //console.log(thisID);
\t \t //console.log(thisW);
\t \t //console.log(thisL);
\t \t //console.log(roomM3);
\t \t
}#calc{
\t width: 850px;
\t margin-bottom: 1em;
}
div {
\t border: 1px solid white;
}
#dropper {
\t width: 400px;
\t position: absolute;
\t margin-left: 875px;
}
#total {
\t clear: both;
}
#button2 {
\t position:absolute;
\t margin-left: 875px;
\t margin-top: -250px;
}
h1 {
\t text-align: center;
}
p {
\t text-align: center;
}
input {
\t text-align: center;
}
.tg {
\t border-collapse:collapse;
\t border-spacing:0;
\t text-align: center;
\t }
.tg td{
\t font-family:Arial, sans-serif;
\t font-size:14px;
\t font-weight:normal;
\t padding:10px 5px;
\t border-style:solid;
\t border-width:1px;
\t overflow:hidden;
\t word-break:normal;
\t text-align: center;
\t }
.tg th{
\t font-family:Arial, sans-serif;
\t font-size:14px;
\t font-weight:normal;
\t padding:10px 5px;
\t border-style:solid;
\t border-width:1px;
\t overflow:hidden;
\t word-break:normal;
\t text-align: center;
\t vertical-align: top;
\t }
.tg .tg-s6z2{
\t text-align:center
\t }
.smallInput {
\t width: 50px;
\t text-align: center;
\t }
.factors {
text-align: center;
width: 80px;
}
.factors2 {
text-align: center;
width: 150px;
}
.tg2 {
\t border-top-style: none;
\t border-right-style: none;
\t border-bottom-style: none;
\t border-left-style: none;
\t border-top-color: #FFF;
\t border-right-color: #FFF;
\t border-bottom-color: #FFF;
\t 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>
\t </div>
<br>
</body>
</html>
鏈接可能會更改或被刪除，使您的問題無效，並且對任何人都沒有任何幫助。請在此處發佈必要的代碼並鏈接到它。 – 2014-12-02 02:25:02