Use onclick="myFunction()" in Variable JS

Question

I have a div which has onclick="myFunction()" for 'Show / hide' id="myTable".

in file.js I use format like this :

function example () {
   var popup = '<div class="box">' +
        '<div onclick="myFunction()" id="button"></div>' +
        '<div id="myTable" class="myTable"></div>' +
        '</div>'; //box
}; //End function example()


/**** How to make myFunction () work? ****/

function myFunction() {
   var x = document.getElementById("myTable");
       if (x.style.display === "none") {
           x.style.display = "block";
       } else {
           x.style.display = "none";
       }
}; // End function myFunction()

I want to Show and hide div id myTable using onclick="myFunction()" .

If using html format on w3school, this works.

But I use the .js file format. I cant add the html code other than using the variable

var ex = '<htmlcode></htmlcode>';

W3Schools Toggle Show/Hide

Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button; here's how to do one. Without more information, we really can't help you. — T.J. Crowder
– T.J. Crowder, Commented Nov 11, 2017 at 9:17
One note: Your div with the click handler has nothing in it, so unless you're using CSS to style it, it will be 0px tall, which makes it rather hard to click. Another issue is that onxyz-attribute-style event handlers can only call global functions (this is one of several reasons not to use them), so your myFunction has to be global. Is it? — T.J. Crowder
– T.J. Crowder, Commented Nov 11, 2017 at 9:18
I don't now if that's all your code, but if it is, you need to add some content to your table, on add some styles to some minimum height and weight to make it visible. In that way, maybe it's working but you're not being able to see it. — dlopez
– dlopez, Commented Nov 11, 2017 at 9:19
attachment using html format. while I'm full js. whether onclick = "myFunction ()" can not work on js variable? — Calvin Ananda
– Calvin Ananda, Commented Nov 11, 2017 at 9:19

Sagar · Accepted Answer · 2017-11-11 09:42:21Z

<!DOCTYPE html>
<html>
<head>
    <title>Demo example</title>
</head>

<body>
<div id="hello"></div>
    <script>
    example();

    function example() {
        var popup = '<div class="box">HELLO World' +
            '<button id="button">Button</button>' +
            '<div id="myTable" class="myTable">Some Content Here</div>' +
            '</div>'; //box
            var el = document.getElementById('hello')
            el.innerHTML = popup;
           //alert(popup);
    }; //End function example()


    /**** How to make myFunction () work? ****/
    document.addEventListener('click', function(e) {
        console.log(e.target.id)
        if (e.target && e.target.id == 'button') { //do something
            myFunction()
        }
    })

    function myFunction() {
        var x = document.getElementById("myTable");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    };
    </script>
</body>

</html>

Use this code snippet by making use of this snippet in this document.addEventListener will listen to all the clicks that are triggered but update the style value only when id matches the designated id provided in e.target.id , by this approach your js will here the dynamically created elements.In your case onclick function is not triggred because js have not linked the element dynamically created in the page , and by event delegation we can solve this problem.

Collectives™ on Stack Overflow

Use onclick="myFunction()" in Variable JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related