Question

我在将div元素的innerHTML设置为＆＃34;＆＃34;时遇到了问题。首次加载时，该元素确实存在。 enter image description here

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

错误：未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null 我知道错误被抛出，因为找不到它试图检索的元素。我的问题是：在初始加载页面后，元素被创建并且元素＆＃34; movieNetwork＆＃34;里面有内容。但是，当我运行代码以清除下拉选项中更改的innerHTML时，它会发出无法设置属性＆＃39; innerHTML＆＃39;为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)，它返回null，然后有效地写null.innerHTML = "";。因此，您的无法设置null 错误的属性'innerHTML'。

你可能需要引用它：

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

Answer 2

我认为您需要为getElementByID

中的值添加引号

将其更改为：

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

Answer 3

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

应该开始听我父亲的话并开始戴上那些眼镜。谢谢你们这么快的回复：）

Answer 4

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

工作代码：

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

请注意，传递到document.getElementById()的参数应始终为字符串。

Answer 5

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

在你的情况下，你需要传递像

这样的字符串文字

document.getElementById('movieNetwork')

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

movieNetwork.innerHTML = "";

div.getelementbyid（id）.innerHTML =＆＃34;＆＃34;发出错误

5 个答案: