javascript - AddEventListener for loop closure -
before linked anything, want know have read plenty issue. , know question's title edited duplicate, okay if end getting solution & explanation problem.
so have table , wanted change names of headers, on click of them. want whenever click on 1 of headers. want take innerhtml , make textbox's value.
i have been trying loop without success. each time click on of headers , textbox filled last header. have working version of code individual click events functions each, think possible loop & closure.
/*/ =========================================================== /*/ (var = 1; < 4; i++) { document.getelementbyid('h' + i).addeventlistener("click", headerclicked); console.log("th " + + " click event added!"); (var x = 0; x < 2; x++) { function headerclicked() { headertext.focus(); headertext.value = tableheaders[x].innerhtml; console.log("th clicked"); console.log("x " + x); } } } /*/ =========================================================== /*/ document.getelementbyid('rename').addeventlistener("click", renaming); var tableheaders = [document.getelementbyid("h1"), document.getelementbyid("h2"), document.getelementbyid("h3") ]; var headertext = document.getelementbyid("headertext"); function renaming() { var newname = document.getelementbyid("newname").value; var addrowlabel = document.getelementbyid("addrowlabel"); switch (headertext.value) { case tableheaders[0].innerhtml: tableheaders[0].innerhtml = newname; addrowlabel.innerhtml = "data(" + newname + " " + tableheaders[1].innerhtml + " " + tableheaders[2].innerhtml + ")"; console.log("header 1 changed!"); break; case tableheaders[1].innerhtml: tableheaders[1].innerhtml = newname; addrowlabel.innerhtml = "data(" + tableheaders[0].innerhtml + " " + newname + " " + tableheaders[2].innerhtml + ")"; console.log("header 2 changed!"); break; case tableheaders[2].innerhtml: tableheaders[2].innerhtml = newname; console.log("header 3 changed!"); addrowlabel.innerhtml = "data(" + tableheaders[0].innerhtml + " " + tableheaders[1].innerhtml + " " + newname + ")"; break; default: console.log("name doesn't exist"); } }<!doctype html> <html> <head> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> </head> <body> <table id="mytable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> <thead> <tr> <th id="h1" class="mdl-data-table__cell--non-numeric">clickme1</th> <th id="h2">clickme2</th> <th id="h3">clickme3</th> </tr> </thead> <tbody> <tr> <td class="mdl-data-table__cell--non-numeric">acrylic (transparent)</td> <td>25</td> <td>$2.90</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">plywood (birch)</td> <td>50</td> <td>$1.25</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">laminate (gold on blue)</td> <td>10</td> <td>$2.35</td> </tr> </table> <div id="controls"> <br> <div id="smallerlabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="headertext" autocomplete='off' /> <label class="mdl-textfield__label" for="currentname">header name</label> </div> - <div id="smallerlabels" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="newname" autocomplete='off' /> <label class="mdl-textfield__label" for="newname">header new name</label> </div> <button id="rename" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> rename </button> </div> </body> </html> <style> button { margin: 10px 5px 5px 10px; } table { margin: 10px 5px 5px 10px; } #smallerlabels { width: 140px; } #controls { margin: auto 5px auto 10px; } </style>
have tried this?
var headertext = document.getelementbyid("headertext"); (var = 1; < 4; i++) { (function(index){ document.getelementbyid('h' + index).addeventlistener("click", function(){ headertext.focus(); headertext.value = this.innerhtml; }); })(i); } basically, idea create iife capture scope of loop variables within closure.
also note don't need have array storing header nodes, since can them click handler context this.
Comments
Post a Comment