两段JavaScript代码可以完美地单独工作，但无法一起工作

Question

The first piece of javascript code allows the user to select how many rows and columns they would like (labelled "CREATE CUSTOM TABLE SIZE").

Another piece of code makes it possible for the user to use sliders to change the amount of red, green and blue (labelled "COLOR SELECTOR (MULTI-VARIABLE)"). This is then applied to the td elements via an onclick (labelled "ONCLICKS FOR ALL TD's").

Originally I had a set table size and everything worked perfectly (Labelled "REMOVED CONTENT"). The problem occurred when I removed the <table> and the containing <tr> and <td> elements so that the user could choose the size via the new HTML content (labelled "CHOOSE TABLE OPTIONS").

So I believe the problem lies between the HTML ("CHOOSE TABLE OPTIONS") and the javascript ("CREATE CUSTOM TABLE SIZE").

Any help is very much appreciated.

 /* ////////// 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

Since the table is generated, the cells are no longer there when the page is loaded, so you have to attach the click handler when the element is created, like this:

/* ////////// 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";
    }
}