javascript external function with event handler to generate DOM elements is not outputting html -
i trying dynamically generate , remove input boxes based on selection. however, have been tweaking code hours cant figure out why it's not generating html elements.
<!doctype html><html><head><title> calculator</title> <link rel="stylesheet" href="css/main.css." type="text/css" <script src="js/addinputs.js"></script> <script> function addlisteners() { if (window.addeventlistener) { document.getelementbyid('sel_value').addeventlistener("change", yourselection, false); } function youselection() { // create 3 inputs 3 labels fro array if (document.getelementbyid('sel_value').value == 1) { addinputs(4,panel01);} // create 6 inputs 6 labels array else if (document.getelementbyid('sel_value').value == 2) { addinputs(6,panel02);} else { //clear panel 1 var remove_p01 = document.getelementbyid('panel01'); remove_p01.parentnode.removechild(remove_p01); // clear panel 2 var remove_p02 = document.getelementbyid('panel02'); remove_p02.parentnode.removechild(remove_p02); } } } window.onload = addlisteners; </script></head><body> // html code <div id="container"> <label for="addinputs">no. of ports</label><!-- lablel selector---> <input id="sel_value" type="number" min="0" max="3" /><br /> </div></div></body></html> // external javascript file
function addinputs(num_of_inputs, div_id) { "use strict"; var main_container, div, fieldlabel, input, count, label_array; // labels input fields label_array = ["name", "height", "width", "depth", "position x", "position y"]; // main container id main_container.document.getelementbyid('container'); // div hold input fields div.document.createelement('div'); div.id = div_id; // create labels , inputs while (count < num_of_inputs) { fieldlabel.createelement('input'); fieldlabel.type = "text"; fieldlabel.value = label_array[count]; fieldlabel.id = "r-port_label" + count; input.document.createelement('input'); input.type = "number"; input.value = "0"; input.id = "r_port_input" + count; // attach inputs , labels parent div div.appendchild(fieldlabel); div.appendchild(input); //increment input fields & labels count += 1; } // attach parent div page container main_container.appendchild(div); } //css code
#container{ width: 400px; min-height: 400px; background: #eeeeee; }
wow disaster. have 1000 errors, looks delibretly scramble code. anyhow there go code something, adjust how wish.
you have:
- wrong function calling in listener
- missing quotes when passing id of panels
- not initialized counter
- false element creation
luckily have "user strict" :o)
function addinputs(num_of_inputs, div_id) { "use strict"; var main_container, div, fieldlabel, input, count, label_array; // labels input fields label_array = ["name", "height", "width", "depth", "position x", "position y"]; // main container id main_container = document.getelementbyid('container'); // div hold input fields div = document.createelement('div'); div.id = div_id; // create labels , inputs count = 0; while (count < num_of_inputs) { fieldlabel = document.createelement('input'); fieldlabel.type = "text"; fieldlabel.value = label_array[count]; fieldlabel.id = "r-port_label" + count; input = document.createelement('input'); input.type = "number"; input.value = "0"; input.id = "r_port_input" + count; // attach inputs , labels parent div div.appendchild(fieldlabel); div.appendchild(input); //increment input fields & labels count += 1; } // attach parent div page container main_container.appendchild(div); } function addlisteners() { if (window.addeventlistener) { document.getelementbyid('sel_value').addeventlistener("change", function (){ // create 3 inputs 3 labels fro array if (document.getelementbyid('sel_value').value == 1) { addinputs(4,'panel01');} // create 6 inputs 6 labels array else if (document.getelementbyid('sel_value').value == 2) { addinputs(6,'panel02');} else { //clear panel 1 var remove_p01 = document.getelementbyid('panel01'); remove_p01.parentnode.removechild(remove_p01); // clear panel 2 var remove_p02 = document.getelementbyid('panel02'); remove_p02.parentnode.removechild(remove_p02); } } , false); } } window.onload = addlisteners;#container{ width: 400px; min-height: 400px; background: #eeeeee; }<div id="container"> <label for="addinputs">no. of ports</label><!-- lablel selector---> <input id="sel_value" type="number" min="0" max="3" /><br /> </div>hope help
Comments
Post a Comment