locked
click handler doesnt work RRS feed

  • Question

  • User-1250660763 posted

    Hey !

    I'm new to web-development and just starting to learn the basics.

    Playing around with event handlers and cant figure out, why this one is not working..?!

    Thanks a lot in advance,

    Regards

    link to the fiddle: https://jsfiddle.net/miosokalo/q64e9osb/#&togetherjs=iDPc6UUnRm

    <!DOCTYPE html>
    <html>
    <head>
    <link href="main.css" rel="stylesheet">
    <script>
    function click() {
    document.getElementById("demo").style.display = "none";
    alert();
    }
    </script>
    </head>
    <body>
    <object id="demo" type="image/svg+xml" data="box.svg" onmouseover="mouseOver()" onmouseout="mouseOut()" onmousemove="mouseMove()" onclick="click()">
    </object>
    </body>
    </html>

    Tuesday, May 5, 2020 4:05 PM

All replies

  • User415553908 posted

    Your function name is "click", which appears to be implicitly defined on your DOM element and meant to call your handler. Renaming your handler to handleClick will solve the issue: https://jsfiddle.net/dzejyw7b/

    Wednesday, May 6, 2020 12:09 AM
  • User-1330468790 posted

    Hi Miosokalo,

     

    The reason is that you used "click" as the fucntion name while there's already a function called click which is responsible for calling the event handler. By declaring another, you override the first, so the event doesn't work anymore. 

    You could refer to this discussion:

    javascript function name cannot set as click?

    Solution:

    You could either change the name of the "click" or use Anonymous function as below.

    <!DOCTYPE html>
    <html>
    <head>
        <link href="main.css" rel="stylesheet">
        
        <script>
            document.addEventListener("DOMContentLoaded", function(){
      	    document.getElementById("demo").addEventListener("click", function(){
                  this.style.display = "none";
                  alert();
              });
            });
        </script>
    </head>
    <body>
        <object id="demo" type="image/svg+xml" data="box.svg" onmouseover="mouseOver()" onmouseout="mouseOut()" onmousemove="mouseMove()">Test
        </object>
    </body>
    </html>

     

    Hope this can help you.

    Best regards,

    Sean

    Wednesday, May 6, 2020 3:20 AM
  • User-1151440187 posted

    <object id="demo" type="image/svg+xml" data="box.svg" onmouseover="mouseOver()" onmouseout="mouseOut()" onmousemove="mouseMove()" >

    <script>

    $('#demo').click(function(){

    $('#demo').css("display","none");

    alert();

    });

    </script>

    I hope this may be helpful to you.

    Thanks!

    Tuesday, June 9, 2020 4:05 AM