带有事件处理程序以生成 DOM 元素的 Javascript 外部函数不输出 html

Question

I am trying to dynamically generate and remove input boxes based on selection.我正在尝试根据选择动态生成和删除输入框。 However, I have been tweaking this code for hours but can't figure out why it's not generating the html elements.但是，我一直在调整这段代码几个小时，但无法弄清楚为什么它没有生成 html 元素。

<!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 // 外部 JavaScript 文件

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 //CSS代码

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


}

Answer 1

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');

Answer 2

Wow this look like a disaster.哇这看起来像一场灾难。 You have like 1000 errors, it looks like somebody delibretly scramble code.你有 1000 个错误，看起来像是有人故意打乱代码。 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传递面板 ID 时缺少引号
not initialized counter未初始化计数器
false element creation虚假元素创建

luckily you have "user strict" :o)幸运的是你有“用户严格”:o)

 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 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 div div.appendChild(fieldLabel); div.appendChild(input); //increment input fields & labels count += 1; } // attach parent div to page container main_container.appendChild(div); } function addListeners() { if (window.addEventListener) { document.getElementById('sel_value').addEventListener("change", function (){ // 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); } } , 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>

Hope it will help希望它会有所帮助

带有事件处理程序以生成 DOM 元素的 Javascript 外部函数不输出 html

问题描述

2 个解决方案

解决方案1
1 2015-04-14 20:33:24

解决方案2
0 已采纳 2015-04-14 21:02:19

带有事件处理程序以生成 DOM 元素的 Javascript 外部函数不输出 html

问题描述

2 个解决方案

解决方案1 1 2015-04-14 20:33:24

解决方案2 0 已采纳 2015-04-14 21:02:19

解决方案1
1 2015-04-14 20:33:24

解决方案2
0 已采纳 2015-04-14 21:02:19