-1

I try to get an element and modify it.

It looks like in the developer console;

document.querySelectorAll('[role="presentation"]').forEach(function(el) {
  console.log('test');
  console.log('innerHTML: ' + el.innerHTML);
});
<div id="toolBarId">
  <table>
    <tbody>
      <tr role="presentation">someElements1</tr>
      <tr>someElements2</tr>
    </tbody>
  </table>
</div>

if I write;

document.getElementById('toolBarId').innerHTML;

It prints;

someElements2

I tried;

document.querySelectorAll('[role="presentation"]').forEach(function (el){
         console.log('test');
//       console.log('innerHTML: ' + el.innerHTML);
         });

It prints nothing.

Edit: I added this just before "/body" in the base html. Did not work.

    <script type="text/javascript">

         document.querySelectorAll('[role="presentation"]').forEach(function (el){
             console.log('test');
//           console.log('innerHTML: ' + el.innerHTML);
             });
         </script>
</body>

Edit2:

    if(document.readyState === "complete") {
        testPresentation() ;
        // seems never called
    }
    else {
          window.addEventListener("onload", function () 
                  {testPresentation() ;}, false);
            // seems never called

          //or
          document.addEventListener("DOMContentLoaded", function () {testPresentation() ;}, false);
            // called but selector cannot find first row of the table still
    }

function testPresentation() {

    console.log('testPresentation called');

         document.querySelectorAll('[role="presentation"]').forEach(function (el){
             console.log('test');
//           console.log('innerHTML: ' + el.innerHTML);
             });
}
martin-g
  • 17,243
  • 2
  • 23
  • 35
classeswilldullyourmind
  • 91
  • 9
  • 1
    It seems to work as expected https://jsbin.com/waremupefa/edit?html,js,console – Titus Jul 06 '19 at 09:50
  • Then what would be the problem? Maybe js code that generates table runs after my queryselector? But then I would'nt get second row also. – classeswilldullyourmind Jul 06 '19 at 09:56
  • From what the first statement prints, it looks like the first row is not there (the one with the `role` attribute) when that statement runs. It looks like the `#toolBarId` div doesn't contain a table, it has just this text: `someElements2` – Titus Jul 06 '19 at 10:01
  • Can i arrange some priority that queryselector would be the code runs finally? Thanks – classeswilldullyourmind Jul 06 '19 at 10:04
  • Yes, call that after the function that generates the table is done. – Titus Jul 06 '19 at 10:05
  • Actually the line I include my js file is the last line in the head section. The other javascript events runs behind the scene by the framework (wicket), I couldnt find a way of order yet. – classeswilldullyourmind Jul 06 '19 at 10:12
  • What if you run the selector [only after DOM is loaded](https://stackoverflow.com/questions/8100576/how-to-check-if-dom-is-ready-without-a-framework)? – Pyromonk Jul 06 '19 at 11:33

1 Answers1

1

Your table HTML is invalid.

tr elements cannot have TextNode children. The only allowed children are td and th elements (and script and template). If you fix that, it works as expected:

document.querySelectorAll('[role="presentation"]').forEach(function(el) {
  console.log('innerHTML: ' + el.innerHTML);
});
<div id="toolBarId">
  <table>
    <tbody>
      <tr>
        <td role="presentation">someElements1</td>
      </tr>
      <tr>
        <td>someElements2</td>
      </tr>
    </tbody>
  </table>
</div>

table-row <tr>

Permitted content: Zero or more <td> and/or <th> elements; script-supporting elements (<script> and <template>) are also allowed

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

connexo
  • 53,704
  • 14
  • 91
  • 128