Задача: нарисовать сетку таблицу20*20 в цикле

@ninuska78 · Регистрация: 21.05.2018

Author24 — интернет-сервис помощи студентам

Я могу вставить свой код. Но он почему-то не работает. Рисует поле, а сетку не рисует. Задача полная такая: написать алгоритм передвижения квадратика сетки до заданного квадрата, клавишами вверх-вниз, влево-вправо. Кто может помочь найти и исправить ошибку? Заранее, большое спасибо! )))

Добавлено через 58 минут
кусок из JS

Javascript

function createMatrix()
{
    var n=20*20;
    for (var i=0; i<n; i++) 
     {
         var div = document.createElement('div');
         div.className='cell';
         matrix.appendChild(div);
     }

кусок из css:

CSS

#matrix{
   width: 400px;
   height: 400px;
   border-top: 1px solid #999;
   border-left: 1px solid #999;
}
#matrix.cell{
    float: left;
    width: 19px;
    height: 19px;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    background: green;
}

Добавлено через 4 минуты
html:

HTML5

<body>
<div id="matrix" tabindex="0"> </div>
<script src="script.js">
</script>

Добавлено через 16 минут

Добавлено через 25 минут
Воспользовалась Вашим советом, сделала новый код

Javascript

for(i=0;i<20;i++)
    {
        var row=document.createElement("div");
        matrix.appendChild(row);
        for(j=0;j<20;j++)
         {
             var cell=document.createElement("div");
             row.appendChild(cell);
         }
     }

Результат тот же, рисует все равно поле вокруг, сверху и справа линии. А ячейки не рисует.

@kalabuni · 21.05.2018, 09:34

Сообщение от ninuska78

Воспользовалась Вашим советом

это вы общаетесь с вашим "вторым я"?

и что ваше "второе я" разъяснило вашему "первому я" про атрибут tabindex для тега <div>?
зачем этот атрибут прописан в контейнере, который в принципе не способен получить фокус?

@ninuska78 · 21.05.2018, 10:28 **[ТС]**

Это мне ответили ссылкой на другие ветки форума, я ответила, а сообщение просто добавилось. Это настройки форума такие. tabindex убрала, все равно не работает.

@kalabuni · 21.05.2018, 11:34

Javascript

onload = function ()
{
var m = document.createElement ('div');
m.style.width = m.style.height = '400px';
m.style.borderTop = m.style.borderLeft = '1px solid silver';
m.id = 'matrix';
for (var j = 0; j < 400; j++)
   {
   var d = document.createElement ('div');
   d.style.float= 'left';
   d.style.width = d.style.height = '20px';
   d.style.borderRight = d.style.borderBottom = '1px solid silver';
   d.id = 'd' + j;
   m.appendChild (d);
   }
document.body.appendChild (m);
}

не забудьте в HTML-коде вслед за блоком <script></script> с кодом прописать ещё и <body></body>
ещё замечу, что никаких дополнительных CSS-правил для работы данного кода прописывать не нужно

ну а что дальше?
предложу очевидные варианты, а вы вы́берите и укажи́те нужный вам (или подробно опиши́те свой)

1. сразу после прорисовки таблицы какая-то случайная ячейка окрашивается в красный цвет и программа ждёт от пользователя
нажатий клавиш-стрелок, реагируя на них соответствующим перемещением красной ячейки по таблице вверх/вниз и вправо/влево

2. после прорисовки таблицы всплывает окошко, призывающее пользователя дважды кликнуть мышью по двум ячейкам таблицы, выбрав таким образом "старт" (ячейка окрасится в красный цвет) и "финиш" (в ячейке появится буква "F"), а далее всё как в п.1. плюс при достижении "финиша" вылетает окошко с поздравлением

@ninuska78 · 21.05.2018, 12:01 **[ТС]**

Спасибо, но результат тот же, не прорисовывается ничего (((
А вы можете сказать, что не так в моем коде, все таки он почти ничем не отличается от Вашего.
Но я вставила Ваш и все равно ничего не работает.

У меня первый вариант задачи.

@atanov · 21.05.2018, 17:02

ninuska78, странно... Вот этот прорисовывает, только уменьшил кол-во до 20-ти:

CSS

1	.divCell{width:20px;height:20px;border: solid black 1px;}

HTML5

<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "54.css">
<html></html>
<script src = "54.js"></script>

Javascript

window.onload = createMatrix;
function createMatrix()
{
var matrix = document.body;
var n = 20;
for (i = 0; i < n; i++) 
{
var divMatrix = document.createElement('div');
divMatrix.className = 'divCell';
matrix.appendChild(divMatrix);
}
}

@Qwerty_Wasd · 21.05.2018, 17:22

atanov, лень было продумывать код и косметику наводить, если с коленки ninuska78 хочет что-то вроде этого - https://codepen.io/qwerty_wasd/pen/GdzXgd

Сообщение от ninuska78

написать алгоритм передвижения квадратика сетки до заданного квадрата, клавишами вверх-вниз, влево-вправо.

Javascript

let table=document.createElement("div"),row=column=0;
table.style.cssText="display:table; \ width:100%; \ border-collapse:collapse; \ box-sizing: border-box";
document.body.appendChild(table);
for(let i=0;i<20;i++){let row=document.createElement("div");row.style.cssText="display:table-row; \ width:100%;";table.appendChild(row);for(let j=0;j<20;j++){let cell=document.createElement("div");cell.style.cssText="display:table-cell; \ height:20px; \ border:2px solid red;";row.appendChild(cell)}}
table.children[row].children[column].style.backgroundColor="red";
document.addEventListener('keydown',function(e){
  if (e.keyCode==40 && row<19 && row>=0){
    table.children[row].children[column].style.backgroundColor="";
    //console.log(`deleted row=${row}`);
    row++;
    //console.log(row);
    table.children[row].children[column].style.backgroundColor="red";
    //console.log(`red row=${row}`);    
  }
  if(e.keyCode==38 && row<=19 &&row >0){    
    table.children[row].children[column].style.backgroundColor="";
    row--;
    table.children[row].children[column].style.backgroundColor="red";
  }
  if(e.keyCode==39 && column<19 && column>=0){
    table.children[row].children[column].style.backgroundColor="";
    column++;
    table.children[row].children[column].style.backgroundColor="red";
  }
  if(e.keyCode==37 && column<=19 && column>0){
    table.children[row].children[column].style.backgroundColor="";
    column--;
    table.children[row].children[column].style.backgroundColor="red";
  }
})

@atanov · 21.05.2018, 17:23

Qwerty_Wasd, честно говоря я не понял, что хочет ТС

@Qwerty_Wasd · 21.05.2018, 17:24

atanov, Пройдите в песочницу - там примерно то.

@ninuska78 · 22.05.2018, 07:49 **[ТС]**

Вот такой у меня результат во всех случаях.

@atanov · 22.05.2018, 08:19

ninuska78, посмотрите/покажите консоль.

@ninuska78 · 22.05.2018, 09:40 **[ТС]**

в том то и дело, консоль не выдает ошибки...
там пусто

@atanov · 22.05.2018, 09:45

ninuska78, а чем Вы запускаете файл/какой веб-сервер используете. Мой вариант Вы пробовали? Сделайте три файла, как в моём сообщении Вчера, 17:02. И откройте домен с /имя.html, а 54.css и 54.js положите там же, где и html.

@ninuska78 · 22.05.2018, 10:03 **[ТС]**

Ваш работает, спасибо!
Я запускаю Google Chrome.

Добавлено через 5 минут
а как теперь из этого сделать сетку?

@atanov · 22.05.2018, 10:07

Сообщение от ninuska78

Ваш работает, спасибо!
Я запускаю Google Chrome.
Добавлено через 5 минут
а как теперь из этого сделать сетку?

Погодите, так Вы не используете веб-сервер, просто локально open в браузере? Я Вас разочарую - так Вы ничего током не сможете кодить. Установите, например openserver, для начала.

@ninuska78 · 22.05.2018, 10:11 **[ТС]**

Хорошо, спасибо!

@Qwerty_Wasd · 22.05.2018, 13:04

ninuska78,

Сообщение от ninuska78

Вот такой у меня результат во всех случаях.

сохранить в utf-8 не забудьте

PHP/HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<script type="text/javascript">
  let table=document.createElement("div"),row=column=0;
table.style.cssText="display:table; \ width:100%; \ border-collapse:collapse; \ box-sizing: border-box";
document.body.appendChild(table);
for(let i=0;i<20;i++){let row=document.createElement("div");row.style.cssText="display:table-row; \ width:100%;";table.appendChild(row);for(let j=0;j<20;j++){let cell=document.createElement("div");cell.style.cssText="display:table-cell; \ height:20px; \ border:2px solid red;";row.appendChild(cell)}}
table.children[row].children[column].style.backgroundColor="red";
document.addEventListener('keydown',function(e){
  if (e.keyCode==40 && row<19 && row>=0){
    table.children[row].children[column].style.backgroundColor="";
    //console.log(`deleted row=${row}`);
    row++;
    //console.log(row);
    table.children[row].children[column].style.backgroundColor="red";
    //console.log(`red row=${row}`);
  }
  if(e.keyCode==38 && row<=19 &&row >0){
    table.children[row].children[column].style.backgroundColor="";
    row--;
    table.children[row].children[column].style.backgroundColor="red";
  }
  if(e.keyCode==39 && column<19 && column>=0){
    table.children[row].children[column].style.backgroundColor="";
    column++;
    table.children[row].children[column].style.backgroundColor="red";
  }
  if(e.keyCode==37 && column<=19 && column>0){
    table.children[row].children[column].style.backgroundColor="";
    column--;
    table.children[row].children[column].style.backgroundColor="red";
  }
})
</script>
</body>
</html>

А у меня вот такой результат.

atanov, и это без локалки, без нет-серва. Просто в клиенте открыть и все. Локалка по большей части нужна лишь для пыхи. Но в одном Вы правы. Про аякс, общение с БД и т.д. можно забыть без серва. Но простые то примеры - зачем?

@atanov · 22.05.2018, 13:19

Сообщение от Qwerty_Wasd

Но простые то примеры - зачем?

Я с Вами полностью согласен.

@ninuska78 0 / 0 / 1 Регистрация: 21.05.2018 Сообщений: 8
	22.05.2018, 10:03 [ТС]	14
	Ваш работает, спасибо! Я запускаю Google Chrome. Добавлено через 5 минут а как теперь из этого сделать сетку? 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	22.05.2018, 10:07	15
	Сообщение от ninuska78 Ваш работает, спасибо! Я запускаю Google Chrome. Добавлено через 5 минут а как теперь из этого сделать сетку? Погодите, так Вы не используете веб-сервер, просто локально open в браузере? Я Вас разочарую - так Вы ничего током не сможете кодить. Установите, например openserver, для начала. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	21.05.2018, 09:34	2
	Сообщение от ninuska78 Воспользовалась Вашим советом это вы общаетесь с вашим "вторым я"? и что ваше "второе я" разъяснило вашему "первому я" про атрибут tabindex для тега <div>? зачем этот атрибут прописан в контейнере, который в принципе не способен получить фокус? 0

@ninuska78 0 / 0 / 1 Регистрация: 21.05.2018 Сообщений: 8
	21.05.2018, 10:28 [ТС]	3
	Это мне ответили ссылкой на другие ветки форума, я ответила, а сообщение просто добавилось. Это настройки форума такие. tabindex убрала, все равно не работает. 0

@ninuska78 0 / 0 / 1 Регистрация: 21.05.2018 Сообщений: 8
	21.05.2018, 12:01 [ТС]	5
	Спасибо, но результат тот же, не прорисовывается ничего ((( А вы можете сказать, что не так в моем коде, все таки он почти ничем не отличается от Вашего. Но я вставила Ваш и все равно ничего не работает. У меня первый вариант задачи. 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	21.05.2018, 17:23	8
	Qwerty_Wasd, честно говоря я не понял, что хочет ТС 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	21.05.2018, 17:24	9
	atanov, Пройдите в песочницу - там примерно то. 0

@ninuska78 0 / 0 / 1 Регистрация: 21.05.2018 Сообщений: 8
	22.05.2018, 07:49 [ТС]	10
	Вот такой у меня результат во всех случаях. Миниатюры 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	22.05.2018, 08:19	11
	ninuska78, посмотрите/покажите консоль. 0

@ninuska78 0 / 0 / 1 Регистрация: 21.05.2018 Сообщений: 8
	22.05.2018, 09:40 [ТС]	12
	в том то и дело, консоль не выдает ошибки... там пусто Миниатюры 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	22.05.2018, 09:45	13
	ninuska78, а чем Вы запускаете файл/какой веб-сервер используете. Мой вариант Вы пробовали? Сделайте три файла, как в моём сообщении Вчера, 17:02. И откройте домен с /имя.html, а 54.css и 54.js положите там же, где и html. 0

@ninuska78 0 / 0 / 1 Регистрация: 21.05.2018 Сообщений: 8
	22.05.2018, 10:11 [ТС]	16
	Хорошо, спасибо! 0

@atanov 634 / 476 / 170 Регистрация: 26.05.2016 Сообщений: 2,638
	22.05.2018, 13:19	18
	Сообщение от Qwerty_Wasd Но простые то примеры - зачем? Я с Вами полностью согласен. 0