代码之家 › 专栏 › 技术社区 › Brad

Javascript可以在第一页工作,但不能在第二页工作

html javascript

Brad · 技术社区 · 7 年前

在使用Jquery几年之后,我决定至少学习基本的Javascript。我遇到了一个对我来说很奇怪的问题。

如果我有一个这样的脚本在第1页上运行,但是在第2页上没有相同的类,那么所有在这个脚本之后的脚本都会停止运行。

var numberOfClasses = document.querySelectorAll("li.line");
document.querySelector("p.classes").innerHTML = 'Number of support Links ' + numberOfClasses.length;

"p.classes" 在第二页上,JavaScript文件中没有任何内容位于将运行的代码之后。这正常吗?代码位于两个页面的html文件底部的JS文件中。上面的代码只是示例

第二页上的错误消息是TypeError: document.getElementById(...) is null ,这是指JS文件中第2页上不存在的第一位代码

1 回复 | 直到 7 年前

Patrick Evans 7 年前

jQuery在这些情况下会自动“失败”。如果找不到选择器,它只返回一个空的jQuery对象,您仍然可以从中调用方法,尽管它们不会做任何事情。

例子

jQuery('NonExistentElement').html("won't show up")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No error will be thrown.

querySelector() 不要返回仍然可以从中访问方法的空对象。它们要么返回元素、元素列表(NodeList、HTMLCollection等),要么返回null。因此,如果您尝试从其中一个访问返回值的属性,则在返回为null的情况下可能会失败

document.querySelector('NonExistentElement').innerHTML = "Won't show up";

null

var element = document.querySelector('p.classes');
if(element != null){
   element.innerHTML = "your html";
}
var element2 = document.querySelector('p.classes2');
if(element2 != null){
   element2.innerHTML = "no error as the if statement fails and so this code wont execute";
}

<p class="classes"></p>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

7 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

7 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前