Я пытаюсь создать сетку и поместить div с кнопкой на сетку. Размещение должно происходить по щелчку в обозначенной позиции. Однако замена при нажатии не происходит.
<body onload='draw()'>
<div id=container>
<canvas id='canvas' width='500' height='500' onclick="showCoords(event)"></canvas>
<div id="buttoncnt" >
<button id="thingi"> </button>
</div>
</div>
<p id='showCoords'></p>
</body>
#canvas {
border: 1px solid red;
z-index = -1;
}
#container {
position : relative;
z-index = 0;
}
#container canvas , #buttoncnt {
position : absolute;
border: 1px solid red;
z-index = 1;
}
function showCoords(event) {
var x = event.clientX - 10;
var y = event.clientY - 10;
var coords = "X coordinates: " + x + ", Y coordinates: " + y;
document.getElementById('showCoords').innerHTML = coords;
var button = document.getElementById("showCoords");
button.style.top = y;
button.style.left = x;
button.style.width = 10;
button.style.height = 10;
}