Javascript 使用事件处理程序生成 DOM 元素的外部函数未输出 html

Question

我正在尝试根据选择动态生成和删除输入框。但是，我已经调整这段代码几个小时了，但无法弄清楚为什么它没有生成 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>

// 外部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代码

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


}

Answer 1

我认为你打错了，不应该是这样的：

main_container.document.getElementById('container');

div.document.createElement('div');

fieldLabel.createElement('input');

input.document.createElement('input');

是：

main_container = document.getElementById('container');

div = document.createElement('div');

fieldLabel = document.createElement('input');

input = document.createElement('input');

Answer 2

哇，这看起来像一场灾难。你有大约 1000 个错误，看起来有人故意打乱代码。不管怎样，你的代码可以做一些事情，你可以根据自己的意愿调整它。

你有：

你的监听器调用了错误的函数
传递面板 ID 时缺少引号
未初始化计数器
创建虚假元素

幸运的是你有 "user strict" :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>

希望对您有所帮助

Javascript 使用事件处理程序生成 DOM 元素的外部函数未输出 html

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

html

javascript

dynamic

dom-events