Question

我有一些JavaScript，其中设置了一个全局变量以容纳函数document.getElementById。然后，在同一个文件中的函数中，我尝试使用该变量以及HTML段落元素的id来写入innerHTML属性。但是，在IE11控制台中，出现错误“ SCRIPT65535：无效的调用对象”。显式编写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

您的问题与function binding有关。

简短的版本，您需要像下面这样将功能绑定到文档：

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

这将确保在没有实际运行功能的情况下将其正确绑定到文档。修复此行后，您应该发现上面的其余代码可以按预期工作。

Answer 2

因为，您需要调用函数来执行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 3

这是因为您的变量objDocGEBI使用事件侦听器的语法存储方法/函数，但它不是事件侦听器。正确的语法为：

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

Answer 4

这可能对您有用：

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

这样更干净，并且您不必保留该奇怪的变量。 ;）

如何正确设置getElementById对象？

4 个答案: