Can't read innerHTML other properties are readable

61 Views Asked by At

I am trying to identify a button by the displayed button text. In the Firefox developer tools I see the associated text in the innerHTML property - but I can't get access to it - it is empty.

$("#objbefDlg .dlg-buttons .dlg-button").each(function() {
    console.log("this ", this, " this.disabled ", this.disabled, " this.innerHTML ", this.innerHTML, " this.className ", this.className, " this.contentEditable ", this.contentEditable);       
});

The HTML-Code:

<div id="objbefDlg" class="dialog">
    <div class="dlg-main">
        <div id="objdlg-cont-left">
            ...
        </div>        
        <div id="objdlg-cont-right">
            ...
        </div> 
    </div>
    <div class="dlg-buttons">
        <button class="dlg-button"></button>
        <button class="dlg-button"></button>
        <button class="dlg-button"></button>
        <button class="dlg-button"></button>
    </div>
</div>

On the other hand I get access to other properties without problems. Does anyone have a tip what else I could try? I can't share the whole code, but here are some excerpts (elsewhere in the programme it works completely without problems). Many thanks for your help Lawinia

Edit: It seems that I'm not allowed to upload pictures, so I'll try to describe the outputs....

Developer Tool Console Output:

"this " <button class="dlg-button"> " this.disabled " false " this.innerHTML " "" " this.className " "dlg-button" " this.contentEditable " "inherit" 
"this " <button class="dlg-button"> " this.disabled " false " this.innerHTML " "" " this.className " "dlg-button" " this.contentEditable " "inherit" 
"this " <button class="dlg-button" disabled=""> " this.disabled " true " this.innerHTML " "" " this.className " "dlg-button" " this.contentEditable " "inherit" 
"this " <button class="dlg-button" disabled=""> " this.disabled " true " this.innerHTML " "" " this.className " "dlg-button" " this.contentEditable " "inherit" 

Developer Tool Properties:

className: "dlg-button"    
contentEditable: "inherit"  
disabled: false  
innerHTML: "Interrompre"  

Here i see the Text in innerHTML, but i can't read it.

Unfortunately, I often don't understand how accessing elements via javaScript and/or JQuery works or doesn't work. It is unclear to me why I cannot access innerHTML in this case. I hope that you can help me to bring some light into the darkness...

0

There are 0 best solutions below