Button doesn't work when added through innerHTML

Question

Solution: my output div had a z-index of -1, so it was making the buttons unclickable. thank you j08691 in the comments

I have a series of buttons that are created in JS to perform a function onclick. If I write the button on the page itself, it works fine. But when they're created within JS and written to the document with .innerHTML, they don't function at all. Is there something about buttons that they won't work when created this way, after the page is loaded? Will I need to add the event listener manually?

As a note, I'm not running this on a server, so everything has to run client-side.

<button class="tag" onclick="alert('Button Clicked!')">Text</button>

The HTML is identical. I ran the function, then literally copied the element from the page source and pasted it into the body directly to test it and it works fine there.

Edit for reprex

body {
    width: 7in;
    margin-left:auto;
    margin-right:auto;
}

#patterns-output {
    position: relative;
    z-index: -1;
}

#search-bar {
    display: none;
    position: fixed;
    top: 0px;
    width: 7in;
    padding: 0.140in;
    margin-bottom: 0.125in;
    background: white;
    border-bottom: solid 1px black;
}

#loading-icon {
    margin: auto;
    display: none;
}

.pattern {
    width: 7in;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.125in;
    margin-bottom: 0.125in;
}

.info {
    width: inherit;
    border: 0px solid green;
}

.pattern-image {
    width: 3in;
    float: right;
    border: 0px solid blue;
}

.thread-image-container {
    width: 20px;
    height: 20px;
    position: relative;
    left: -5px;
    top: 3px;
    float: left;
    overflow: hidden;
    border: 0px solid blue;
}

.thread-image {
    position: relative;
    left: -600px;
    top: -619px;
}

.tag {
    float: left;    
    margin-bottom: 5px;
    margin-right: 5px;
}

.thread-changes {
    width: inherit;
    clear: both;
    border: 0px solid yellow;
}

.cols {
    /* 7in wide - (0.3" padding x2) = 6.4" - 0.4 gap = 6" / 2 = 3" col */
    column-count: 2;
    column-gap: 0.4in;
    column-width: 3in;
    border: 0px solid purple;
}

ul, ol {
    padding-left: 0.3in;
}

<html lang="en">

    <head>
        <title>Embroidery Database</title>
    </head>

    <body>
        
        <div id="search-bar" style="display: inline;">
            
            <button class="tag" onclick="alert('Button Clicked')">Test</button>
            
        </div>
        
        <div id="patterns-output" style="top: 59px;">
            <div class="pattern" id="M18731">
                <img class="pattern-image" src="patterns/M18731.jpg">
                <b>A Little Dirt Never Hurt</b> (M18731)<br>
                5.5in wide x 4.85in high (17353 stitches)
                <ul><b>Thread List</b> (4)
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1048.jpg"></div>Celery (#1048)</li>
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1184.jpg"></div>Scarlet Rose (#1184)</li>
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1058.jpg"></div>Sienna (#1058)</li>
                    <li><div class="thread-image-container"><img class="thread-image" src="threads/910-1065.jpg"></div>Copper (#1065)</li>
                </ul>
                <button class="tag" onclick="alert('Button Clicked')">Text</button>
                <button class="tag" onclick="alert('Button Clicked')">Plants</button>
                <br>
                <div class="thread-changes">
                    <ol><b>Thread Changes</b> (4)
                        <div class="cols">
                            <li>Celery: Vegetable Tops, Text</li>
                            <li>Scarlet Rose: Radish, Beet, Text</li>
                            <li>Sienna: Text</li>
                            <li>Copper: Carrot</li>
                        </div>
                    </ol>
                </div>
            </div>
        </div>
    </body>

</html>

Can you please create a [mre] so we can see the issue for ourselves and help you debug? The button should work as expected when added provided you're using the `onclick` attribute for your event listener (if you're adding it a different way then you might be facing: [Is it possible to append to innerHTML without destroying descendants' event listeners?](https://stackoverflow.com/q/595808)) — Nick Parsons, Nov 05 '22 at 13:04
This is killing me cause when I make a reprex, it works just fine, so it cant just be .innerHTML destroying or not adding event listeners. There must be an error somewhere in the html preventing it from functioning correctly. — Stray Vagabond, Nov 05 '22 at 21:04
There are no errors. I've added a snippet where the bug is happening. I've looked over the HTML for missing tags or other syntax errors but I can't find anything wrong with it. — Stray Vagabond, Nov 05 '22 at 21:28
Your negative z-index is placing content behind the page, making it unclickable — j08691, Nov 05 '22 at 21:50
.... mother %(#&*^(*&@# Yup. that was the problem. Thank you > — Stray Vagabond, Nov 06 '22 at 00:46

score -3 · Answer 1 · answered Nov 05 '22 at 13:03

-3

document.body.innerHTML =`<button class="tag" onclick="alert('Button Clicked!')">Text</button>`

answered Nov 05 '22 at 13:03

Suraj Kumar

1
2

2

Never just dump code as your answer. Always include an explanation, no matter how obvious it may seem to you – j08691 Nov 05 '22 at 21:52

Button doesn't work when added through innerHTML

1 Answers1