Tengo una página html básica que tiene tres elementos de lienzo, todos con identificaciones únicas. He recopilado los elementos en una matriz usando document.querySelectAll('canvas') de javascript. Si hago una función usando para cada uno en la matriz, puedo ver toda la información PERO si trato de extraer esa información para poder dividirla y obtener el valor de identificación, no funciona. He intentado varias cosas pero nada parece funcionar. ¿Estoy tratando de hacer algo que no se puede hacer?
!¡IMPORTANTE! : Esto debe hacerse en javascript vainilla, no se permiten bibliotecas de terceros de ningún tipo. Es por razones de seguridad, y eso es todo lo que puedo decir al respecto.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title> Canvas Graph </title> </head> <body> <!-- the id here will be used to set the height of the canvas to be created --> <div> <canvas id="canvas1"></canvas> </div> <div> <canvas id="canvas2"></canvas> </div> <div> <canvas id="canvas3"></canvas> </div> </body> </html> <script> document.onload = getCanvasId(); function getCanvasId() { const elementList = document.querySelectorAll('canvas'); const elementArray = [...elementList]; var temp = []; var stringArray = []; elementArray.forEach(element => { temp.push(element); console.log(element); }); for(i=0; i<temp.length; i++){ stringArray[i] = temp[i].toString(); console.log(stringArray); } temp.forEach(element => { var t = element.toString().split("#"); console.log(t); }); } </script>Recomendaría imprimir el html en la consola con console.dir() para verificar las propiedades HTML DOM disponibles para un elemento en particular.
Y accedería a una identificación de un elemento usando su propiedad de id : Element.id .
const elementList = document.querySelectorAll('canvas'); var stringArray = []; elementList.forEach(element => { stringArray.push(element.id); }); console.log(stringArray); <div> <canvas id="canvas1"></canvas> </div> <div> <canvas id="canvas2"></canvas> </div> <div> <canvas id="canvas3"></canvas> </div>