div.getelementbyid(id).innerHTML = "" 报错

Question

我在将 div 元素的内部 HTML 设置为“”时遇到问题。当我第一次加载它时，该元素确实存在。

我在 HTML 页面上使用下拉菜单。在选项更改时，我想清除所有内容并将其替换为新的 SVG 元素。

错误：未捕获类型错误：无法设置属性 'innerHTML' 为 null 我知道抛出错误是因为找不到它尝试检索的元素。我的问题是：初始加载页面后，将创建元素并且元素 "movieNetwork" 中包含内容。但是当我使用运行代码来清除下拉选项中更改的内部 HTML 时，它会给出 无法设置属性 'innerHTML' of null错误

请告诉我可能是什么问题。下面是代码片段

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer Network</title>
    <link rel="stylesheet" href="movie-network.css"/>
    <link rel="shortcut icon" href="popcha.ico" type="image/x-icon">
    <script type="text/javascript" src="movie-network.js"></script>
    <script type="text/javascript" src="movieJson.js"></script> 
    <script>
      // Sniff MSIE version
      // http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/
      var ie = ( function() {
        var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');
        while (
         div.innerHTML='<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',all[0]
        );
        return v > 4 ? v : undef;
      }() );

      function takeAction() {
        if( ie && ie < 9 ) {
      D3notok();
        } else {
          // Load D3.js, and once loaded do our stuff
          var head = document.getElementsByTagName('head')[0];
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = "d3.v3.min.js";
          script.addEventListener('load', D3ok, false);
          script.onload = "D3ok();";
      head.appendChild(script);
       }
     }

    </script>

</head>
<body onload="takeAction();">
    <div id ="selectoptionsMenu">
        <select id="selectoption" onchange="changeGraph()">
          <option value="eigen">Eigen Betweeness Centrality</option>
          <option value="central">Eigen Centrality</option>
          <option value="cluster">Cluster</option>
          <option value="transaction">Transaction</option>
          <option value="transaction">MediaSweep</option>
        </select>
    </div>
  <div id="nocontent">
    <h1>Sadly your browser is not compatible with this site</h1>

    <div>You can use <a href="http://www.google.com/chrome/">Google
    Chrome</a>, <a href="http://www.mozilla.org/firefox">Mozilla Firefox</a>
    or <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Microsoft
    Internet Explorer (v9 or above)</a> to access the PopCha Movie
    Network</div>

  </div>

  <div id="movieNetwork"></div>
  <div>
    <script type="text/javascript">
        function changeGraph()
         {  
            document.getElementById(movieNetwork).innerHTML = ""; //ERROR
            D3ok();

         }
         </script>
     </div>
  <div id="sidepanel">
    <div id="title">
        <br/>Customer Network<br/>
    </div>    
    <div id="movieInfo" class="panel_off"></div>
  </div>

</body>
</html>

Answer 1

因为你写了这一行：

document.getElementById(movieNetwork).innerHTML = ""; //ERROR

... 引用了您从未声明过的 movieNetwork 变量。因此，您调用 document.getElementById(undefined)，其中 returns 为 null，然后有效地编写 null.innerHTML = "";。因此你的 Cannot set 属性 'innerHTML' of null 错误。

您可能需要在其周围加上引号：

document.getElementById("movieNetwork").innerHTML = "";

Answer 2

movieNetwork 应该是一个字符串。由于 movieNetwork 未定义，document.getElementById(movieNetwork) 将只是 return null.

工作代码：

function changeGraph()
{   
    // Changed movieNetwork to "movieNetwork".
    document.getElementById("movieNetwork").innerHTML = "";
    D3ok();
}

请注意，传递给 document.getElementById() 的参数应该始终是一个字符串。

Answer 3

我认为您需要为 getElementByID

中的值添加引号

改为：

document.getElementById("movieNetwork").innerHTML = "";

Answer 4

好吧，我犯了一个愚蠢的错误。我忘记了引号并开始查看代码的其他部分是否有错误 document.getElementById("movieNetwork").innerHTML = "";

应该开始听我爸爸的话，开始戴那副眼镜。谢谢你们这么快的回复:)

Answer 5

问题是您需要将元素的 ID 传递给 document.getElementById()，但您传递的是 dom 元素引用（因为 movieNetwork 是元素的 ID得到 copied as a property of the window object) 所以即使你没有声明 movieNetwork 是指 dom 元素引用。

在你的情况下，你需要传递一个字符串文字，比如

document.getElementById('movieNetwork')

或者在 html5 浏览器中你可以直接说

movieNetwork.innerHTML = "";

div.getelementbyid(id).innerHTML = "" 报错

div.getelementbyid(id).innerHTML = "" giving out error

html

javascript

svg