Question

下面的代码说cannot read property 'textContent' of null：

<form action="{%url 'Eats_app:pause_button'%}" method="post">
              {% csrf_token %}
              <button class="btn btn-primary " type="submit" value="Pause" id="pausebutton" style="padding-left: 3rem; padding-right: 3rem;" >Pause</button>
              <!-- /* <input class="btn btn-primary " type="submit" value="Pause" id="pausebutton" onclick="toggleTheButton()" style="padding-left: 3rem; padding-right: 3rem;"> */ -->
</form>

document.querySelector('#pausebuttons').textContent.toggle('Pause', 'Resume');

Answer 1

您选择的id是错误的。尝试： document.querySelector('#pausebutton').textContent.toggle('Pause', 'Resume');

要匹配元素的id：

<button class="btn btn-primary" type="submit" value="Pause" id="pausebutton" style="padding-left: 3rem; padding-right: 3rem;" >Pause</button>

Answer 2

错误说明，以避免以后发生此类错误。

您正在尝试使用查询选择器获取元素pausebuttons，但该元素为空。

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。如果没有找到匹配项，则返回null

您在这里得到null，因此找不到与此选择器匹配的内容。可能是拼写错误之类的。

请在您的代码中再次检查它。

 document.querySelector('#pausebuttons') is null that's why you are getting this error.

解决方案：

您将id作为pausebutton，但是在选择器参数中您正在传递pausebuttons。最后是 s 。

document.querySelector('#pausebutton').textContent.toggle('Pause', 'Resume');

无法读取null的属性“ textContent”

2 个答案: