根据循环变量的值着色特定 HTML 表块的问题
[英]Problem colouring specific HTML table blocks according to the value of loop variable
问题描述
/*Note that the column of the matrix is row of the tetris board and vice versa, So going left to right ----> in this matrix would be the same as going top to bottom in the actual tetris board*/ var a = [ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], ]; //Generates random integer between given range function getRandomInteger(min, max) { return Math.round(Math.random() * (max - min)) + min; } function getColor() { //an array of red, blue,green, yellow, orange, purple and salmon color var colorArray = ["#C0392B","#2980B9", "#27AE60", "#F1C40F", "#E67E22", "#8E44AD", "#FFA07A"] return colorArray[getRandomInteger(0, 7)]; } //Creates a random set of block on the top function createBlocks() { var i = getRandomInteger(0, 9); blockHeight = getRandomInteger(2, 4); var blockColor = getColor(); for (var j= 0; j<blockHeight; j++) { a[i][j] = 1; nthBoxToColor =i+10*j+1; document.querySelector('td:nth-of-type('+nthBoxToColor+')').style.backgroundColor = blockColor; } }; //Moves the set of block one step down function moveOneStepDown() { //For testing, to be removed later console.log(a[i]); for (var i = 0; i < 10; i++) { a[i].pop(); a[i].unshift(0); //For testing, to be removed later console.log(a[i]); }; //For testing, to be removed later console.log("-------------------------------------"); }; /*the setInterval function of javascript executes the code infinite number of times, so a new function is defined to carry it out finite no of times*/ function setIntervalX(callback, delay, repetitions) { var x = 0; var intervalID = window.setInterval(function () { callback(); if (++x === repetitions) { window.clearInterval(intervalID); }; }, delay); }; //Code execution createBlocks(); setIntervalX(moveOneStepDown, 100, a[0].length-blockHeight);
gameContainer { margin-left: 10vw; width: 80vw; background-color: blue; }.tetris-board { margin-left: 30vw; width: 20vw; } td { height: 2vw; }
<:DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link type="text/css" rel="stylesheet" href="assets\css\style.css"></link> <script type="text/javascript" src="assets\js\jquery-3.3.1.slim.min.js"></script> <script type="text/javascript" src="assets\js\bootstrap.min.js"></script> <script type="text/javascript" src="assets\js\popper.min.js"></script> </head> <body> <div class="gameContainer"> <table class="table table-bordered table-dark tetris-board"> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> </div> </body> <script type="text/javascript" src="assets\js\script.js"></script> </body> </html>
I have an integer variable nthBoxToColor whose value changes along with the loop.
我有一个 integer 变量nthBoxToColor ，其值随着循环而变化。 And I want to color some specific table blocks according to the current value of nthBoxToColor .我想根据nthBoxToColor的当前值为一些特定的表格块着色。
So I tried the following code by concatenating strings with the variable:所以我通过将字符串与变量连接起来尝试了以下代码：
document.querySelector('td:nth-of-type(' + nthBoxToColor + ')').style.backgroundColor = "blue";
But I got an error:但我得到一个错误：
Uncaught TypeError: Cannot read property 'style' of null
at createBlocks (script.js:39)
at script.js:74
createBlocks @ script.js:39
(anonymous) @ script.js:74
What went wrong?什么地方出了错？ What is the right code to do it?什么是正确的代码？
Edit:编辑：
The loop I ran the code inside is:我在里面运行代码的循环是：
for (var j= 0; j<blockHeight; j++)
{
a[i][j] = 1;
var nthBoxToColor =i+10*j+1;
document.querySelector('td:nth-of-type(' + nthBoxToColor + ')').style.backgroundColor = blockColor;
}
Where i is a random integer between 0 and 9 and blockHeight is also a random integer between 2 and 4.其中i是介于 0 和 9 之间的随机 integer 和blockHeight也是介于 2 和 4 之间的随机 integer。
1 个解决方案
解决方案1
0 已采纳 2019-10-21 08:26:34
Right now, you're adding 10 to the number being passed to nth-of-type on every iteration:现在，您在每次迭代时将传递给nth-of-type的数字加 10：
nthBoxToColor = i + 10 * j + 1;
So on the first iteration, if the selector is所以在第一次迭代中，如果选择器是
td:nth-of-type(9)
then on the second iteration, the selector will be然后在第二次迭代中，选择器将是
td:nth-of-type(19)
But you only have 10 TDs in a single TR, so the selector fails.但是您在单个 TR 中只有 10 个 TD，因此选择器失败。
While you could select the first TR first and then call querySelector on it to get the right TD:虽然您可以先 select 第一个 TR，然后在其上调用querySelector以获得正确的 TD：
for (var j = 0; j < blockHeight; j++) {
a[i][j] = 1;
nthBoxToColor = i + 1;
const tr = document.querySelector(`tr:nth-child(${j + 1})`);
tr.querySelector(`td:nth-of-type(${nthBoxToColor})`).style.backgroundColor = blockColor;
}
It would be easier just use bracket notation to look up the appropriate nested child:使用括号表示法查找适当的嵌套子级会更容易：
const tbody = document.querySelector('.table > tbody');
and then, inside the loop:然后，在循环内：
tbody.children[j].children[i].style.backgroundColor = blockColor;
/*Note that the column of the matrix is row of the tetris board and vice versa, So going left to right ----> in this matrix would be the same as going top to bottom in the actual tetris board*/ var a = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ]; //Generates random integer between given range function getRandomInteger(min, max) { return Math.round(Math.random() * (max - min)) + min; } function getColor() { //an array of red, blue,green, yellow, orange, purple and salmon color var colorArray = ["#C0392B", "#2980B9", "#27AE60", "#F1C40F", "#E67E22", "#8E44AD", "#FFA07A"] return colorArray[getRandomInteger(0, 7)]; } //Creates a random set of block on the top function createBlocks() { var i = getRandomInteger(0, 9); blockHeight = getRandomInteger(2, 4); var blockColor = getColor(); const tbody = document.querySelector('.table > tbody'); for (var j = 0; j < blockHeight; j++) { a[i][j] = 1; tbody.children[j].children[i].style.backgroundColor = blockColor; } }; //Moves the set of block one step down function moveOneStepDown() { //For testing, to be removed later // console.log(a[i]); for (var i = 0; i < 10; i++) { a[i].pop(); a[i].unshift(0); //For testing, to be removed later // console.log(a[i]); }; //For testing, to be removed later // console.log("-------------------------------------"); }; /*the setInterval function of javascript executes the code infinite number of times, so a new function is defined to carry it out finite no of times*/ function setIntervalX(callback, delay, repetitions) { var x = 0; var intervalID = window.setInterval(function() { callback(); if (++x === repetitions) { window.clearInterval(intervalID); }; }, delay); }; //Code execution createBlocks(); setIntervalX(moveOneStepDown, 100, a[0].length - blockHeight);
gameContainer { margin-left: 10vw; width: 80vw; background-color: blue; }.tetris-board { margin-left: 30vw; width: 20vw; } td { height: 2vw; }
<:DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link type="text/css" rel="stylesheet" href="assets\css\style.css"></link> <script type="text/javascript" src="assets\js\jquery-3.3.1.slim.min.js"></script> <script type="text/javascript" src="assets\js\bootstrap.min.js"></script> <script type="text/javascript" src="assets\js\popper.min.js"></script> </head> <body> <div class="gameContainer"> <table class="table table-bordered table-dark tetris-board"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> <script type="text/javascript" src="assets\js\script.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 JQuery 根据 HTML 输入值生成多个块 - Generate a number of blocks according to an HTML input value using JQuery
如何遍历HTML表中的行以查找特定值？ - how to loop through rows in an HTML table to find a specific value?
根据变量值防止点击html元素 - Prevent click on the html element according to the variable value
根据下拉值过滤 html 表格 - Filter html table according to dropdown value
根据 Html 中用户选择的编号激活块 - Activate blocks according to user selected number in Html
从数组创建 HTML 表（特定于循环） - Create HTML table from array (loop specific)
将变量插入 HTML 表中的特定单元格 - Insert variable into a specific cell in the HTML table
通过 html 中的 Knockout 循环将值存储在变量中 - Store value in a variable via Knockout loop in html
HTML仅显示具有特定值的表数据 - HTML Displaying table data with specific value only
在 HTML 弹出窗口中为条着色 - Colouring a bar in your HTML popup
相关标签