如何正确设置getElementById对象？

Question

我有一些 JavaScript，我在其中设置了一个全局变量来保存函数 document.getElementById。在同一文件的一个函数中，我然后尝试使用该变量以及 HTML 段落元素的 id 来写入 innerHTML 属性。但是，在 IE11 控制台中，我收到错误 "SCRIPT65535: Invalid Calling Object"。明确地写 document.getElementByID("someid").innerHTML = "value" 是有效的。这是代码的关键部分（都在同一个文件中）。

<!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>

Answer 1

因为，你需要调用你的函数来执行innerHTML函数。

而且你不能使用你的语法。你需要这样写你的 document.getElementById; ：

第一种方式：

<!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>

第二种方式：

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

Answer 2

这是因为你的变量objDocGEBI在事件监听器的语法中存储了一个method/function，但它不是事件监听器。正确的语法是：

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

Answer 3

这可能对您有用：

<!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>

这样更简洁，而且您不必保留那个奇怪的变量。 ;)

Answer 4

您的问题与 function binding 有关。

简短版本，您需要像这样将函数绑定到文档：

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

这将确保它正确绑定到文档而实际上运行函数。修复此行后，您应该会发现上面的其余代码按预期工作。

如何正确设置getElementById对象？

How Do I Correctly Set a getElementById Object?

html

getelementbyid