html - JavaScript onChange Event to use current row values only -
an extension of previous calculators, time @ onchange or addeventlistener functions run code without using submit buttons.
i having hard time trying figure out how can have event fire once either 'h' or 'extra room factor' fields have been changed. want row being edited / changed fire event, not entire table. trying figure out how can 'find' row / cell calling function , use in script other values required.
the script uses json data determines how table set out.
the code should values l, w , h , multiply them together. should multiply room factor , write result 'total room m3' field.
(no rep post images) 
uh, have code in fiddle current code relies on json details. can't post fiddle link due 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 = 0; < 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 = 0; < result.titles.length; i++ ) { var createhead = document.createelement("th"); createhead.innerhtml = result.titles[i].name; table.appendchild(createhead); } //create row elements for ( var = 0; < result.numberofrooms ; i++ ) { var row = table.insertrow(-1); var cell1 = row.insertcell(0); var roominput = document.createelement("input"); roominput.type = "text"; roominput.id = "r" + + "name"; cell1.appendchild(roominput); var cell2 = row.insertcell(1); var linput = document.createelement("input"); linput.type = "number"; linput.id = "r" + + "l"; linput.classname = "smallinput"; cell2.appendchild(linput); var cell3 = row.insertcell(2); var winput = document.createelement("input"); winput.type = "number"; winput.id = "r" + + "w"; winput.classname = "smallinput"; cell3.appendchild(winput); var cell4 = row.insertcell(3); var hinput = document.createelement("input"); hinput.type = "number"; hinput.id = "r" + + "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" + + "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" + + "m3total"; cell6.appendchild(m3output); var cell7 = row.insertcell(6); var suggdia = document.createelement("output"); suggdia.id = "r" + + "dia"; cell7.appendchild(suggdia); var cell8 = row.insertcell(7); var outsize = document.createelement("select"); outsize.id = "r" + + "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" + + "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 = 0; < 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 ( === 0 ) { td.appendchild(document.createtextnode("total m3 rooms:")); } else if ( == 1 ) { td.appendchild(document.createtextnode("extra house heat load:")); } else if ( == 2 ) { td.appendchild(document.createtextnode("total system m3 required:")); } tr.appendchild(td); var td = document.createelement('td'); if ( === 0 ) { outputbox.id = "housem3total"; td.appendchild(outputbox); } else if ( == 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 ( == 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 = 0; < 3; i++ ) { var createhead = document.createelement("th"); if ( === 0) { createhead.innerhtml = ""; } else if ( === 1) { createhead.innerhtml = "dropper duct size"; } else if ( === 2) { createhead.innerhtml = "dropper duct capacity"; } table.appendchild(createhead); } for ( var = 0; < 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 = 0 ; < 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 = 0 ; < result.locations.length ; i++) { if (result.locations[i].name === getlocationfactor) { getlocationvalue = result.locations[i].factor; } } } function calculatetotalm3() { for ( var = 0; < rooms ; i++ ) { var rooml = document.getelementbyid("r" + + "l").value, roomw = document.getelementbyid("r" + + "w").value, roomh = document.getelementbyid("r" + + "h").value, roomfactor = document.getelementbyid("r" + + "factor").value, ductdia = document.getelementbyid("r" + + "dia"), calcm3 = math.round((rooml * roomw * roomh) * roomfactor); var outputroomm3 = document.getelementbyid("r" + + "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 = 0; < 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 = 0; < droppersides ; i++ ) { var droppersize = document.getelementbyid("d" + + "size").value, outputdroppercapacity = document.getelementbyid("d" + + "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 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 = 0 ; < result.modelfinder.length ; i++) { if (selectedunit === result.modelfinder[i].model) { droppercapacityunit.innerhtml = result.modelfinder[i].droppercapacity; } } } window.onload = init; function calculateroomm3() { // iterate through current rows , values of each, save variable in each , 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 , actual)"> <br/></br> <input onclick="droppercalculate()" type="button" value= "2. calculate dropper"><br> </div> <br> </body> </html>
i solved getting entire id of current cell event runs from, splicing id scheme have through 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 quick solve, works!
Comments
Post a Comment