未捕获的类型错误：无法设置未定义的属性（设置“不透明度”）如何通过函数设置图像不透明度？
[英]Uncaught TypeError: Cannot set properties of undefined (setting 'opacity') How to set image opacity via function?
问题描述
I'm creating bunch of images with ( let obrazek = document.createElement("img"); ) and i set their opacity to 0.9 with ( obrazek.style.opacity = 0.9; ) and i also add onclick.
我正在使用（ let obrazek = document.createElement("img"); ）创建一堆图像，并将它们的不透明度设置为 0.9（ obrazek.style.opacity = 0.9; ），并且我还添加了 onclick。
Basically I just want to change their opacity to 1.0 after i click one of images, but it doesn't work, error - Uncaught TypeError: Cannot set properties of undefined (setting 'opacity').基本上，我只想在单击其中一张图像后将它们的不透明度更改为 1.0，但它不起作用，错误 - 未捕获的类型错误：无法设置未定义的属性（设置“不透明度”）。
I tried with obrazek.addEventListener("onclick", zaznacz);我试过 obrazek.addEventListener("onclick", zaznacz); , but with this the function itself doesn't work, but there are no errors. ，但有了这个功能本身不起作用，但没有错误。
I have JQuery on,我有 JQuery，
new to JS and I have no idea why this doesn't work. JS 新手，我不知道为什么这不起作用。
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);
}
1 个解决方案
解决方案1
0 2021-11-02 23:49:03
You're nearly there, but you have some errors here.你快到了，但你在这里有一些错误。
There are specific methods for manipulating the class list on an element, so I've changed your code to use .classList.add() instead of attempting to set the class list directly as an attribute.有一些特定的方法可以操作元素上的类列表，因此我已将您的代码更改为使用.classList.add()而不是尝试将类列表直接设置为属性。
I changed the code that attempts to set the onclick attribute to use .addEventListener() instead.我更改了尝试将onclick属性设置为使用.addEventListener()的代码。 Note that the event name is 'click', and I pass just the name of the function.请注意，事件名称是“click”，我只传递了函数的名称。
When you create obraz your code then attempts to set the style on content , which comes up as undefined.当您创建obraz您的代码会尝试在content上设置样式，结果显示为未定义。
I've added a line to append the elements created to the <body> .我添加了一行来将创建的元素附加到<body> 。
I've added a little styling to my test page to help visualise the results, since there are no images.我在我的测试页面中添加了一些样式以帮助可视化结果，因为没有图像。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.