Question

需要帮助。当我执行window.onclick时，它会在浏览器consol日志上返回Cannot read property 'style' of null。我错过了什么吗？

这是HTML代码。

<div id="toolIcon" onclick='document.getElementById("toolCont").style.display = "block";'>
    Show Menu
</div>

<div class="msgTextTop" id="streamHead">
    <!-- Respond AJAX here -->          
</div>

这是将通过AJAX发送的PHP代码。

echo "  <div class='msgTopTool_cont' id='toolCont'>";
echo "      <div class='toolContGroup'>";
echo "          <ul class='tolContUL'>";
echo "              <li class='tolContLI'><a href='profile.php?uid=" . $qFC['ID'] . "'>View Profile</a></li>";
echo "              <li class='tolContLI'><a href='javascript:void(0)'>Second Link</a></li>";
echo "          </ul>";
echo "      </div>";
echo "      <div class='toolContGroup'>";
echo "          <ul class='tolContUL'>";
echo "              <li class='tolContLI'><a href='javascript:void(0)'>Third Link</a></li>";
echo "          </ul>";
echo "      </div>";
echo "  </div>";

这是AJAX的回应。

function clickbutton() {
    //AJAX Code status
        document.getElementById('streamHead').innerHTML = this.responseText;
    //AJAX Code send
}

这是Javascript代码。

window.onclick = function(event) {
    if (!event.target.matches('#toolIcon')) { //toolIcon is a button to show 'toolCont'
        document.getElementById('toolCont').style.display = 'none';
    }
}

Answer 1

在('#toolCont')

之后，您的Javascript代码'）'丢失了

请找到以下代码并试用。

window.onclick = function(event) {
   if (!event.target.matches('#toolCont')) {
      document.getElementById('toolCont').style.display = 'none';
   }
}

Answer 2

您可以在使用之前检查该元素是否已设置。将window.onclick更改为

window.onclick = function(event) {
  if(document.body.contains(document.getElementById('toolCont')))
  {
    if (!event.target.matches('#toolIcon')) {
        document.getElementById('toolCont').style.display = 'none';
    }
  }

}

Answer 3

<div onclick='document.getElementById("toolCont").style.display = "block";

它不会响应，因为你刚刚将div显示属性更改为“没有”＃39;这意味着它不再可点击，你首先需要将其显示回到“阻止”状态。通过使用javascript而不是任何事件监听器，它将起作用。

Answer 4

在您的代码中，未定义ID为“toolCont”的元素。

<div id="toolIcon" onclick='document.getElementById("toolIcon").style.color = "red";'>
    Change color
</div>

<div class="msgTextTop" id="streamHead">
    <!-- Respond AJAX here -->          
</div>

<div id="toolIcon" onclick='document.getElementById("toolIcon1").style.display = "block";'>
    Show Menu
</div>

<div class="msgTextTop" id="streamHead">
    <!-- Respond AJAX here -->          
</div>

window.onclick return无法读取属性'style'的null

4 个答案: