为什么文档无法在JavaScript上运行

时间:2019-05-10 02:07:30

标签: javascript html css

我看过各种网站,但没有帮助。对我来说,一切似乎都是正确的,但我无法获得

document.getElementByClassName("first").style.display="none"; 

无论我尝试多少次,都可以正常工作,但我在JS上始终收到相同的错误消息;

  

错误:“文档”未定义。[no-undef]

尝试定义“文档”部分,但没有帮助。也许是我在尝试尝试外部文件夹之间的连接不正确而没有做任何更改

HTML:

<html>
 <head>
       <script src="JS.js"></script>
 </head>
 <body>
 <div class="first">
    <p>Hello and welcome to my first page<br>
    in this page I will test out new think<br>
    and see what works and what doesn't<br>
    </p>
</div>
<button type="button" onclick="myFunction">Click me</button>
</body>
</html>

JS:

function myFunction(){
    document.getElementsByClassName("first").style.display="none";

该按钮应该清除“第一”中的所有样式。我已经更改了许多结果,并且代码没有任何变化,只是同一错误一遍又一遍地重复。

2 个答案:

答案 0 :(得分:6)

filter(null)返回一个元素数组,因此您需要要定位的元素的索引。

您应该通过document.getElementByClassName()调用该函数,并将myFunction()添加到[0]以获得特定的元素。

getElementsByClassName
function myFunction() {
    document.getElementsByClassName("first")[0].style.display="none";
}

答案 1 :(得分:0)

它似乎表明您收到的错误来自短绒,但与您的代码不起作用无关。要解决棉绒问题,您可能需要查看一下此advanced settings。 对于运行时产生的错误,应查看浏览器控制台(在大多数情况下使用 F12 打开)。

关于您的主要问题,有两点要解决:

1)
您的内联onclick处理程序应这样调用:

<button type="button" onclick="myFunction()">Click me</button>

2)
而不是使用 document.getElementsByClassName()-它返回一个数组- 我建议您改用 document.querySelector(),因为它只返回找到的第一个元素,并且如果您已经非常熟悉css选择器,则使用起来会容易得多。 有关更多信息,请参见query {or}函数post

因此,在您的代码中,它应如下所示:

function myFunction() {
  document.querySelector(".first").style.display="none";
}