帶有事件處理程序以生成 DOM 元素的 Javascript 外部函數不輸出 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 時缺少引號
未初始化計數器
虛假元素創建

幸運的是你有“用戶嚴格”: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>

希望它會有所幫助

帶有事件處理程序以生成 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