Estoy creando un montón de imágenes con (let obrazek = document.createElement("img"); ) y configuro su opacidad en 0.9 con ( obrazek.style.opacity = 0.9; ) y también agrego onclick.
Básicamente, solo quiero cambiar su opacidad a 1.0 después de hacer clic en una de las imágenes, pero no funciona, error: error de tipo no detectado: no se pueden establecer propiedades de indefinido (configuración de 'opacidad').
Probé con obrazek.addEventListener("onclick", zaznacz); , pero con esto la función en sí no funciona, pero no hay errores.
tengo JQuery activado,
nuevo en JS y no tengo idea de por qué esto no funciona.
function zaznacz() { this.style.opacity = 1.0; } let obraz = document.createElement("div"); obraz.setAttribute("class", "obraz"); content.style.textAlign = "center"; content.style.color = "#ffffff"; for(let i = 0; i < 8; i++) { let tiles = document.createElement("div"); tiles.setAttribute("class", ("tiles"+i)); tiles.style.height = "40px"; for(let j = 0; j < 8; j++) { let obrazek = document.createElement("img"); obrazek.setAttribute("class", "tile"); obrazek.style.opacity = 0.9; obrazek.setAttribute("onclick", "zaznacz()"); tiles.appendChild(obrazek); } obraz.appendChild(tiles); }Estás casi allí, pero tienes algunos errores aquí.
Hay métodos específicos para manipular la lista de clases en un elemento, así que cambié su código para usar .classList.add() en lugar de intentar configurar la lista de clases directamente como un atributo.
Cambié el código que intenta configurar el atributo onclick para usar .addEventListener() en su lugar. Tenga en cuenta que el nombre del evento es 'clic' y solo paso el nombre de la función.
Cuando crea obraz , su código intenta establecer el estilo en el content , que aparece como indefinido.
Agregué una línea para agregar los elementos creados al <body> .
Agregué un poco de estilo a mi página de prueba para ayudar a visualizar los resultados, ya que no hay imágenes.
function zaznacz(){ console.log("Zaznacz called") this.style.backgroundColor = "lightgrey"; // Added to help visualise this.style.opacity = 1.0; } let obraz = document.createElement("div"); obraz.classList.add("obraz"); obraz.style.textAlign = "center"; // changed content to obraz obraz.style.color = "#ffffdd"; for(let i=0; i<8; i++) { let tiles = document.createElement("div"); tiles.classList.add("tiles"+i); tiles.style.height = "40px"; for(let j=0; j<8; j++) { let obrazek = document.createElement("img"); obrazek.classList.add("tile"); obrazek.style.opacity = 0.9; obrazek.addEventListener("click", zaznacz); tiles.appendChild(obrazek); } obraz.appendChild(tiles); } document.querySelector('body').appendChild(obraz); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .tile { min-width:40px; min-height:40px; border:1px solid grey; } </style> </head> <body> </body> </html>