兩段JavaScript代碼可以完美地單獨工作，但無法一起工作

Question

第一部分JavaScript代碼允許用戶選擇所需的行數和列數（標記為“ CREATE CUSTOM TABLE SIZE”）。

另一段代碼使用戶可以使用滑塊更改紅色，綠色和藍色的數量（標記為“顏色選擇器（多變量）”）。 然后通過onclick（標記為“所有TD的ONCLICKS”）將其應用於td元素。

最初，我有一個固定的桌子大小，並且一切正常（Labelled“已刪除內容”）。 當我刪除<table>以及包含的<tr>和<td>元素，以便用戶可以通過新的HTML內容（標記為“選擇表選項”）選擇大小時，發生了問題。

因此，我認為問題出在HTML（“選擇表選項”）和javascript（“創建自定義表大小”）之間。

很感謝任何形式的幫助。

 /* ////////// CREATE CUSTOM TABLE SIZE ////////// */ function createTable() { var numberOfRows = document.getElementById("rowsSelected").value; var numberOfColumns = document.getElementById("columnsSelected").value; var tableElement = document.getElementById("myTable"); for (let z = 1; z <= numberOfColumns; z++) { var trElements = document.createElement("tr"); tableElement.appendChild(trElements); for (let i = 1; i <= numberOfRows; i++) { var tdElements = document.createElement("td"); tdElements.classList.add("tableBox"); trElements.appendChild(tdElements); } } var sizingOptions = document.getElementById("createTableOptions"); sizingOptions.parentNode.removeChild(sizingOptions); } /* ////////// INTERFACE ////////// */ /* /////////////////////////////// */ /* ///// COLOR SELECTOR (MULTI-VARIABLE) ///// */ var input = document.querySelectorAll("input"); for(var i = 0; i < input.length; i++){ input[i].addEventListener("input", function(){ var red = document.getElementById("red").value, green = document.getElementById("green").value, blue = document.getElementById("blue").value; var display = document.getElementById("display"); display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")"; }); } function myColor() { var red = document.getElementById("red").value, green = document.getElementById("green").value, blue = document.getElementById("blue").value; return "rgb(" + red + ", " + green + ", " + blue + ")"; } /* ////////// GRID ////////// */ /* ////////////////////////// */ /* ///// ONCLICKS FOR ALL TD's ///// */ window.onload = function() { //apply color var myCells = document.getElementsByClassName("tableBox"); for (let i = 0; i < myCells.length; i++) { myCells[i].onclick = function() { myCells[i].style.backgroundColor = myColor(); } } } /* ///// CLEAR GRID BUTTON ///// */ function drawingGrid() { //make all boxes white var i; var x = document.getElementsByClassName("tableBox"); for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "#fff"; x[i].style.transition = "all 500ms"; } } 

 /* ////////// GENERAL ////////// */ * { box-sizing: border-box; } body { font-family: arial; font-size: 16px; color: #000; user-select: none; } /* ////////// SECTIONS ////////// */ /* // RESPONSIVE COLUMNS // */ [class*="column_"] { float: left; padding: 10px; border: 1px dotted #eee; } .column_1 {width: 8.33%;} .column_2 {width: 16.66%;} .column_3 {width: 25%;} .column_4 {width: 33.33%;} .column_5 {width: 41.66%;} .column_6 {width: 50%;} .column_7 {width: 58.33%;} .column_8 {width: 66.66%;} .column_9 {width: 75%;} .column_10 {width: 83.33%;} .column_11 {width: 91.66%;} .column_12 {width: 100%;} .row::after { content: ""; clear: both; display: table; } @media only screen and (max-width: 1030px) { /* For mobile phones: */ [class*="column_"] { width: 100%; } } /* ////////// TEXT ////////// */ h1 { font-size: 30px; color: #000; text-align: center; text-decoration: underline; text-emphasis: bold; } h2 { font-size: 18px; color: #000; text-align: center; text-decoration: underline; text-emphasis: bold; } h3 { font-size: 16px; color: #000; text-align: center; text-decoration: underline; } p { } /* ////////// CREATE TABLE OPTIONS ////////// */ button { margin: 10px 10px 10px 0px; } /* ////////// TABLE ////////// */ .sizeMinMax { min-width: 500px; height: 500px; max-height: 500px; } .gridSection table { border-collapse: collapse; position: relative; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } .gridSection tr { } .gridSection td { border: 2px solid #000; width: 1.8vw; height: 1.8vw; } /* ////////// MODIFIERS ////////// */ .leftMods { width: 50%; float: left; padding: 5px; } .rightMods { width: 50%; float: right; padding: 5px; } .leftMods input { width: 100%; } .leftMods p { position: relative; top: 15px; } #display { border: 1px solid #000; width: 100%; height: 100px; background-color: #f00; border-radius: 20px; } #display h2 { margin-top: 40px; text-shadow: 1px 1px 2px #fff, -1px 1px 2px #fff, 1px -1px 2px #fff, -1px -1px 2px #fff; text-decoration: none; } .modifiersSection .clearButton { align-content: center; width: 100%; height: 65px; margin-top: 5px; margin-bottom: 5px; font-size: 30px; } .modifiersSection h1 { margin-top: 0px; margin-bottom: 0px; } .eventTypeSelect { margin: 10px; } .eventTypeSelect select { width: 200px; font-family: arial; font-size: 16px; color: #000; } 

 <!doctype html> <html lang="en-gb"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Test</title> <link href="css/Test.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="row"> <div class="column_6 sizeMinMax"> <section class="gridSection"> <table id="myTable"> <!-- CHOOSE TABLE OPTIONS --> <div id="createTableOptions"> <p>Please create your own grid by selecting how many rows and columns you would like from the below options:</p> <p>Number of Rows:</p> <select onchange="" id="rowsSelected"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> <p>Number of Columns:</p> <select onchange="" id="columnsSelected"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select><br/> <button onclick="createTable()">Create my grid</button> </div> </table> <!-- REMOVED CONTENT --> <!-- <table id="myTable"> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> <tr> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> <td class="tableBox"></td> </tr> </table> --> </section> </div> <!-- ////////// INTERFACE ////////// --> <section class="modifiersSection"> <div class="column_6 sizeMinMax"> <h2>Modifiers</h2> <div class="leftMods"> <div id="display"><h2>COLOUR SELECTED</h2></div> <p>Red</p><input type="range" min="0" max="255" step="1" id="red" value="255"/> <br/><br/> <p>Green</p><input type="range" min="0" max="255" step="1" id="green" value="0"/> <br/><br/> <p>Blue</p><input type="range" min="0" max="255" step="1" id="blue" value="0"/> </div> <div class="rightMods"> <!-- INCOMPLETE IDEA <div class="eventTypeSelect"> <select onchange="" id="eventType"> <option>onclick</option> <option>onmouseover</option> <option>onmouseout</option> </select> </div> --> </div> <button class="clearButton" onclick="drawingGrid()">CLEAR &nbsp; GRI D</button> </div> </section> </div> <script src="js/Test.js" type="text/javascript"></script> </body> </html> 

Answer 1

由於生成了表，因此在加載頁面時不再存在單元格，因此在創建元素時必須附加單擊處理程序，如下所示：

/* ////////// CREATE CUSTOM TABLE SIZE ////////// */

function createTable() {
    var numberOfRows = document.getElementById("rowsSelected").value;
    var numberOfColumns = document.getElementById("columnsSelected").value;

    var tableElement = document.getElementById("myTable");

    for (let z = 1; z <= numberOfColumns; z++) {
        var trElements = document.createElement("tr");

        tableElement.appendChild(trElements);

        for (let i = 1; i <= numberOfRows; i++) {
            var tdElements = document.createElement("td");

            tdElements.classList.add("tableBox");
            tdElements.onclick = function() {
                this.style.backgroundColor = myColor();
            }
            trElements.appendChild(tdElements);
        }
    }

    var sizingOptions = document.getElementById("createTableOptions");
    sizingOptions.parentNode.removeChild(sizingOptions);
}

/* ////////// INTERFACE ////////// */
/* /////////////////////////////// */

/* ///// COLOR SELECTOR (MULTI-VARIABLE) ///// */

var input = document.querySelectorAll("input");
for(var i = 0; i < input.length; i++){
    input[i].addEventListener("input", function(){
        var red = document.getElementById("red").value,
            green = document.getElementById("green").value,
            blue = document.getElementById("blue").value;
        var display = document.getElementById("display");
        display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")"; 
    });
}

function myColor() {
    var red = document.getElementById("red").value,
    green = document.getElementById("green").value,
    blue = document.getElementById("blue").value;

    return "rgb(" + red + ", " + green + ", " + blue + ")";
}



/* ////////// GRID ////////// */
/* ////////////////////////// */

/* ///// CLEAR GRID BUTTON ///// */

function drawingGrid() { //make all boxes white
    var i;
    var x = document.getElementsByClassName("tableBox");
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "#fff";
        x[i].style.transition = "all 500ms";
    }
}