How Do I Correctly Set a getElementById Object?

Question

I have some JavaScript in which I set a global variable to hold the function document.getElementById. In a function in the same file, I then try to use that variable, along with the id of an HTML paragraph element, to write to the innerHTML property. However, in the IE11 console, I get the error "SCRIPT65535: Invalid Calling Object". Explicitly writing document.getElementByID("someid").innerHTML = "value" works. Here are the key parts of the code (all in the same file).

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p id="name1"></p>
    <script>
      var objDocGEBI = document.getElementById;

      function writeData() {
        if (true) {
          objDocGEBI("name1").innerHTML = "value";
        }
      }
    </script>
  </body>
</html>

score 1 · Accepted Answer · edited Sep 11 '18 at 03:36

1

Your problem is to do with function binding.

The short version, is you need to bind the function to the document like so:

var objDocGEBI = document.getElementById.bind(document);

This will make sure that it is correctly bound to the document without actually running the function. Once you fix this line, you should find that the rest of your code above works as intended.

edited Sep 11 '18 at 03:36

Jack Bashford

38,499
10
36
67

answered Sep 11 '18 at 01:34

Shadow

6,976
4
39
52

So, so far, this answer allows me the flexibility to bind something generically to getElementById, and I can name the Id of the element later. Once I added '.bind(document)', things did work as planned. Going to leave this open for a little bit, to see if anyone else responds (is there a reason not to do this?), but, so far, I'm happy with the results on IE11 (though I haven't tried it with my gadget, yet. – M J Sep 14 '18 at 03:01

KolaCaine · Answer 2 · 2018-09-10T22:46:33.217

Because, you need to call your function for executing the innerHTML function.

And you cannot using your syntax. You need to write your document.getElementById; like that :

The first way :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p id="name1"></p>
    <script>
    var objDocGEBI = document.getElementById('name1');

    function writeData(){
      if (true){
        objDocGEBI.innerHTML = "value";
      }
    }
    
    writeData(); // it's calling your function and execute your innerHTML
    </script>
  </body>
</html>

The second way :

// Example with IIFE
(() => {
 var objDocGEBI = document.getElementById('name1');
 if (true){
     objDocGEBI.innerHTML = "value";
  }
})()

Jack Bashford · Answer 3 · 2018-09-10T23:37:09.870

0

It's because your variable objDocGEBI is storing a method/function in the syntax of an event listener, but it's not an event listener. Correct syntax would be:

function writeData(name) {
    if (true) {
        document.getElementById(name).value = "value";
    }
}

edited Sep 10 '18 at 23:37

answered Sep 10 '18 at 22:42

Jack Bashford

38,499
10
36
67

Damián Pablo González · Answer 4 · 2018-09-10T23:06:47.570

This may be useful for you:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p id="name1"></p>
    <p id="name2"></p> <!-- added, just for a 2nd example -->
    <script>
    

    function writeData(id, value){
        document.getElementById(id).innerHTML = value;
    }
    
    writeData('name1', 'John'); 
    writeData('name2', 'Peter');
    </script>
  </body>
</html>

It's much cleaner this way, and you won't have to keep that weird variable. ;)

How Do I Correctly Set a getElementById Object?

4 Answers4