Не появляются элементы при нажатии [JS]

100
04 октября 2019, 08:30

Помогите разобраться почему не рисуются крестики в квадратиках по нажатию? Нужно что бы при нажатии на каждый квадратик - там появлялся крестик, как это лучше реализовать? Мой код почему то не работает

function draw(x) { 
  var canvas = x.getElementsByTagName("canvas"); 
  if (canvas.getContext) { 
    var ctx = canvas.getContext('2d'); 
 
    ctx.beginPath(); 
    ctx.lineTo(100, 100); 
    ctx.lineTo(100, 70); 
    ctx.lineTo(25, 1); 
    ctx.lineTo(25, 30); 
    ctx.fill(); 
    ctx.beginPath(); 
    ctx.lineTo(25, 100); 
    ctx.lineTo(100, 30); 
    ctx.lineTo(100, 1); 
    ctx.lineTo(25, 70); 
    ctx.fill(); 
    ctx.stroke(); 
  } 
}
.row { 
  background-color: darkgreen; 
  border: black; 
  padding: 10px; 
  margin: 0; 
  padding: 0; 
} 
 
.col-md-4 { 
  height: 200px; 
  background-color: darkgreen; 
  border: 15px green solid; 
} 
 
.container { 
  width: 50%; 
  height: 100%; 
  position: relative; 
} 
 
#top-left { 
  border-top: 0; 
  border-left: 0; 
} 
 
#top-center { 
  border-top: 0; 
} 
 
#top-right { 
  border-top: 0; 
  border-right: 0; 
} 
 
#center-left { 
  border-left: 0; 
} 
 
#center-right { 
  border-right: 0; 
} 
 
#bottom-left { 
  border-left: 0; 
  border-bottom: 0; 
} 
 
#bottom-center { 
  border-bottom: 0; 
} 
 
#bottom-right { 
  border-right: 0; 
  border-bottom: 0; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <meta charset="UTF-8"> 
    <title>Game</title> 
</head> 
<body > 
    <div class="container"> 
        <div class="row"> 
            <div id="top-left" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
            <div id="top-center" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
            <div id="top-right" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
        </div> 
        <div class="row"> 
            <div  id="center-left" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
            <div  id="center-center" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
            <div id="center-right" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
        </div> 
        <div class="row"> 
            <div id="bottom-left" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
            <div id="bottom-center" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
            <div id="bottom-right" class="col-md-4" onclick="draw(this);"> 
                <canvas  width="inherit" height="inherit"> 
                </canvas> 
            </div> 
        </div> 
    </div> 
 </body> 
</html>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

x.getElementsByTagName("canvas") - возвращает коллекцию, у которой, естественно, нет свойства (метода) getContext.

А x.getElementsByTagName("canvas")[0] возвращает первый элемент этой коллекции, у которого такое свойство (метод) есть.

var canvas = x.getElementsByTagName("canvas")[0];
if (canvas && canvas.getContext) {
  ...
READ ALSO
выбор select jquery
javascript

выбор select jquery

Почему, если я таблицу подгружу через ajax, то событие change не видит?

 120
UnhandledPromiseRejectionWarning: Error: Incorrect login details were provided [закрыт]
javascript

UnhandledPromiseRejectionWarning: Error: Incorrect login details were provided [закрыт]

 150
Как использовать разметку HTML
javascript

Как использовать разметку HTML

возник такой вопросДелаю рест приложение на стеке Yii2+Vue

 104
Активное подключение к БД
MySQL

Активное подключение к БД

Подскажите как постоянно отправлять данные в бдЯ написал мини-прогу которая отправляет данные в бд, но заметил один момент если подождать...

 99