2

I want to add onclick event on embed tag but the problem is,it is not working on chrome and the handler is not working.Other than onclick event mouseover and mouseleave are working.here is the code HTML

<embed src="http://localhost/credit-app1/" onclick="increaseSize()" onload="bottomRight()">

JAVASCRIPT

function increaseSize(){
    var embedtag = document.querySelector("embed");
    if(embedtag.style.width == "400px"){
        embedtag.style.width = "100px";
        embedtag.style.height = "100px";
    }else{
        embedtag.style.width = "400px";
        embedtag.style.height = "500px"; 
    }
    console.log(embedtag)
}
Ibrahim Kashif
  • 21
  • 2
  • 1
    Probably because you are clicking the content of the `embed` which does not have your click event. – Lain Nov 24 '21 at 09:26
  • @Lain the code works when you give it to wrapper div but not excatly perfect. I wonder what can we do as workaround for this problem. – Erenn Nov 24 '21 at 09:38
  • I just changed the src of embed tag to src="https://img.icons8.com/color/40/000000/mastercard.png" it works perfectly fine but when I am giving the src="http://localhost/credit-app1/" of my app it is not working I wonder why @Erenn – Ibrahim Kashif Nov 24 '21 at 09:51

1 Answers1

0

you could just do it with pure css using the hover effect:

embed:hover {
  transform: scale(2.5);
}

Im not sure how it should work with onclick(), because the content inside will never have the click Event...

OR:

You could try to lay a transparent <div> over the embeded content:

<div style="height: 100px; width: 100px; position: absolute; top: 0; background-color: transparent;" onclick="increaseSize()"></div>
<embed src="http://localhost/credit-app1/" onload="bottomRight()" style="position: relative;">

in the JavaScript you need too resize the div too.

BeanBoy
  • 326
  • 2
  • 10