Uncaught TypeError设置opacity报错，点击动态创建的img修改透明度不生效如何解决

问题原因分析 #

你遇到的报错和事件不触发的问题分别来自两个错误写法：

• 行内绑定onclick时this指向错误：你通过setAttribute("onclick", "zaznacz()")的方式绑定事件时，函数是在全局作用域执行，内部的this指向window对象，window.style本身不存在，所以触发了属性设置的类型错误。
• addEventListener事件名拼写错误：绑定点击事件时不需要加on前缀，你写的"onclick"是无效事件名，所以点击不会触发函数。

修复方案（二选一即可） #

方案1：使用标准addEventListener绑定（最推荐） #

只需要修改循环内img的事件绑定代码即可，不需要修改现有zaznacz函数的逻辑，绑定后事件触发时this会自动指向被点击的img元素：

// 把原来的obrazek.setAttribute("onclick", "zaznacz()")替换成下面的代码
obrazek.addEventListener("click", zaznacz);

方案2：保留行内绑定写法的修改方式 #

如果你想继续用行内属性绑定事件，需要手动将当前元素作为参数传入函数：

1. 修改事件绑定代码：

obrazek.setAttribute("onclick", "zaznacz(this)");

2. 修改zaznacz函数接收元素参数：

function zaznacz(el) {
  el.style.opacity = 1.0;
}

可选：jQuery简化写法 #

因为你已经引入了jQuery，也可以直接用事件委托的方式统一绑定所有img的点击事件，不需要在循环里逐个绑定：

$(document).on('click', '.tile', function() {
  $(this).css('opacity', 1);
});

内容的提问来源于stack exchange，提问作者roditu