0
147
ViewsUso de Javascript para incrustar un evento onClick en un div HTML
Estoy tratando de hacer una cuadrícula interactuable y configurable usando divs como sus celdas.
Para dar un poco de contexto en esta parte del código, básicamente estoy repitiendo td's en la salida HTML y luego agregando una cantidad específica de divs en td's/rows (cellID es solo un método para decorar los nombres de div);
var table, row, div; table = document.createElement('table'); for (var i=0; i < rows; i++) { row = document.createElement('td'); row.id = "row-" + i; for (var j=0; j < cols; j++) { div = document.createElement('div'); div.id = cellID(i, j); row.append(div); } table.append(row); }Digamos que: -rows = 4 y -cols = 2 | El resultado de salida en el extremo del usuario sería este:
Ahora, mi problema actual que estoy tratando de resolver es cómo hacer que cada div repetido reciba el evento onClick () para que ocurra un evento cuando haga clic en los cuadros, esto es lo que intenté para que esto funcione:
- div.addEventListener("clic", nulo); //Esta parte no funcionó para mí, aunque para ser honesto, realmente no sé con qué reemplazar el nulo
- div.getElementById(div.id).onclick = function() { OnClick() }; (OnClick es un método de prueba para ver si funciona, sin embargo, este simplemente rechaza un error y dice que "div.getElementById" no es una función, así que no sé qué pasa con eso).
Estas cosas que probé fueron todas las cosas que se habían recomendado en todo momento, pero no sé qué más podría hacer que funcione.
¿Cuál crees que puede ser el problema allí?
-1 answers
Answer question0
div.addEventListener() debería funcionar.
Pero necesita crear una estructura DOM válida. Las filas son tr , las celdas son td . Puede poner el div en el td , o simplemente usar el td directamente.
let rows = 2, cols = 4; var table, row, div; table = document.createElement('table'); for (var i = 0; i < rows; i++) { row = document.createElement('tr'); row.id = "row-" + i; for (var j = 0; j < cols; j++) { let cell = document.createElement("td"); div = document.createElement('div'); div.id = cellID(i, j); div.addEventListener("click", function() { console.log('Clicked on', this.id); }); div.innerText = div.id; cell.append(div); row.append(cell); } table.append(row); } document.body.appendChild(table); function cellID(i, j) { return `cell-${i}-${j}`; }