2

I have a button:

<button type="button" id="errorLog" class="btn btn-secondary btn-lg btn-block">Download</button>

that is only visible if a condition is met. I'm trying to add an event listener to fire some JavaScript based on the visibility of the button. In my research I see that I could use a MutationObserver but for some reason I get an error of:

'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

After searching I did see:

but for some reason when I code the MutationObserver as:

let errorFile = document.getElementById('errorLog')
var observer = new MutationObserver(function() {
    if (errorFile.style.display == 'display') {
        console.log('foobar')
    }
})
const config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
}
observer.observe(errorFile, config)

I get the error of Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node' so I tried a conditional of:


let errorFile = document.getElementById('errorLog')
if (errorFile != null) {
    var observer = new MutationObserver(function() {
        if (errorFile.style.display == 'display') {
            console.log('foobar')
            errorLog.addEventListener('click', (e) => {
                e.preventDefault
                console.log('fired click')
            })    
        }
    })
    const config = { 
        attributes: true, 
        childList: true, 
        characterData: true 
    }
    observer.observe(errorFile, config)
}

I've also referenced:

but it doesn't even fire. How can I fire JavaScript based on the visibility of a button?

DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
  • 1
    my guess is that you may be executing this function before your html with the errorFile button is declared. If this is the case, document.getElementById('errorFile') will return undefined (or null?) – ControlAltDel May 21 '19 at 20:07
  • Correct so how do I rectify that so that the above will work when the button is visible because I thought that's what I could do with the observer – DᴀʀᴛʜVᴀᴅᴇʀ May 21 '19 at 20:13
  • Missing something in your explanation. Under what "condition" is the button hidden, how is it hidden, and finally why don't you just execute your JavaScript at the time the button is hidden within the same code that hides the button?! – Randy Casburn May 21 '19 at 20:14
  • button is fired from a module. I can get the event lister to work after the module displays the button but I thought that was what I could use the mutation to detect when the button was set to `display:block`. – DᴀʀᴛʜVᴀᴅᴇʀ May 21 '19 at 20:28
  • First examine the state of DOM at the time your code runs, don't just guess. If the element doesn't exist, you need to observe its parent/ancestor/document with subtree:true and check if it appeared in your callback. Note you can observe only an existing element. – wOxxOm May 22 '19 at 05:08
  • You can fix your problem using jQuery and $.ready. But if you don't want to use jQuery, here is a post about how to do the equivalent in pure JavaScript: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t – ControlAltDel May 22 '19 at 13:17
  • Can you clarify if your button is conditionally "visible" or "present in the DOM"? They mean different things. – yqlim Sep 24 '19 at 02:47

0 Answers0