当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript external function with event handler to generate DOM elements is not outputting html

问题描述:

I am trying to dynamically generate and remove input boxes based on selection. However, I have been tweaking this code for hours but cant figure out why it's not generating the 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 three inputs with three labels fro array

if (document.getElementById('sel_value').value == 1) { addInputs(4,panel01);}

// create six inputs with six labels from 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 for 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 for input fields

label_array = ["Name", "Height", "Width", "Depth", "Position x", "Position Y"];

// main container id

main_container.document.getElementById('container');

// this div is to hold the input fields

div.document.createElement('div');

div.id = div_id;

// create labels and 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 and labels to parent div

div.appendChild(fieldLabel);

div.appendChild(input);

//increment input fields & labels

count += 1;

}

// attach parent div to page container

main_container.appendChild(div);

}

//CSS Code

#container{

width: 400px; min-height: 400px; background: #eeeeee;

}

网友答案:

Wow this look like a disaster. You have like 1000 errors, it looks like somebody delibretly scramble code. Anyhow there you go code that will do something, you adjust it how you wish.

You have:

  • wrong function calling in your listener
  • missing quotes when you passing ID of panels
  • not initialized counter
  • false element creation

luckily you have "user strict" :o)

function addInputs(num_of_inputs, div_id) {"use strict";var main_container, div, fieldLabel, input, count, label_array;// Labels for input fieldslabel_array = ["Name", "Height", "Width", "Depth", "Position x", "Position Y"];// main container idmain_container = document.getElementById('container');// this div is to hold the input fieldsdiv = document.createElement('div');div.id = div_id;   // create labels and 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 and labels to parent divdiv.appendChild(fieldLabel);div.appendChild(input);//increment input fields & labelscount += 1;}// attach parent div to page containermain_container.appendChild(div);
}        

function addListeners() {if (window.addEventListener) {document.getElementById('sel_value').addEventListener("change",function (){// create three inputs with three labels fro arrayif (document.getElementById('sel_value').value == 1) { addInputs(4,'panel01');}// create six inputs with six labels from arrayelse if (document.getElementById('sel_value').value == 2) { addInputs(6,'panel02');}else {//clear panel 1var remove_p01 = document.getElementById('panel01');remove_p01.parentNode.removeChild(remove_p01);// clear panel 2var 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 for selector--->
  <input id="sel_value" type="number" min="0" max="3" /><br />
</div>
网友答案:

I think you have a typo, should'nt this:

main_container.document.getElementById('container');

div.document.createElement('div');

fieldLabel.createElement('input');

input.document.createElement('input');

be:

main_container = document.getElementById('container');

div = document.createElement('div');

fieldLabel = document.createElement('input');

input = document.createElement('input');
分享给朋友:
您可能感兴趣的文章:
随机阅读: