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

时间：2018-11-04 14:52:47

标签： javascript html css

第一段JavaScript代码允许用户选择所需的行和列数（标记为“创建自定义表格大小”）。

另一段代码使用户可以使用滑块更改红色，绿色和蓝色的数量（标记为“颜色选择器（多变量）”）。然后通过onclick（标记为“所有TD的ONCLICKS”）将其应用于td元素。

最初，我有一个固定的桌子大小，并且一切正常（Labelled“已删除内容”）。当我删除<table>以及包含<tr>和<td>的元素，以便用户可以通过新的HTML内容（标记为“选择表选项”）选择大小时，发生了问题。 / p>

因此，我认为问题出在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()">C L E A R &nbsp; G R I D</button>
        </div>
    </section>
</div>
    
    
    
    
    
    
    
    
    <script src="js/Test.js" type="text/javascript"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

由于生成了表格，因此在加载页面时不再存在单元格，因此在创建元素时必须附加单击处理程序，如下所示：

/* ////////// 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";
    }
}
相关问题
最新问题