Hang up onclick on certain pictures?

Question

JavaScript

From the api, I get the html markup of the task (for school). This markup can contain both small pictures (for example, formulas, calculations) and large ones (graphs, maps, etc.).

You need to somehow parse the resulting html, get images with a width > 200 (conditionally) and hang onClick on them somehow, but I don’t quite understand how this can be implemented. Maybe someone faced similar?

Answer 1

let's say:

<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="hi">
<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="g">
<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="hi">

.hi{
  width:200px;
  height: 200px;
  border: 1px solid red;
}
.g{
  width:100px;
  height: 200px;
  border: 1px solid red;
}

document.querySelectorAll('img').forEach((item)=>{
  if(item.offsetWidth == 200){
  		item.setAttribute("onclick", "func")
  }
  console.log(item) 
})

Answer 2

You need to somehow parse the resulting html ...

Not necessary.
Make a delegate handler where it will check who the target element is, and if it's an image, also check its size.