This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(7个答案)
2年前关闭。
我在运行简单的JavaScript代码时遇到麻烦,并且我认为代码可能未正确链接。您愿意看看吗?这是HTML代码:
这是JS代码:
感谢您的任何帮助,您可以提供!
您的js文件已加载,因此将在按钮加载之前执行。因此,
2.1添加
2.2正如其他人所说,在每个HTML元素之后
200%可能无法正常工作。我想你想把盒子的高度加倍,对吗?用给定的百分比设置高度并不等于缩放高度。以百分比表示的大小是神奇的,它们与它们的父元素有关,在您的情况下,除您之外,它可能无法正常工作。您应该尝试这样:
(7个答案)
2年前关闭。
我在运行简单的JavaScript代码时遇到麻烦,并且我认为代码可能未正确链接。您愿意看看吗?这是HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<script type="text/javascript" src="javascript.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="Button1">Grow</button>
<button id="Button2">Blue</button>
<button id="Button3">Fade</button>
<button id="Button4">Reset</button>
</body>
</html>
这是JS代码:
document.getElementById("Button1").addEventListener("click", function(){
document.getElementById("box").style.height=200%;
});
感谢您的任何帮助,您可以提供!
最佳答案
有3个问题:
在javascript中,没有200%
,JS与CSS不同。 JS使用整数和字符串。如果要将元素的高度设置为200%,则需要在字符串中键入它:
document.getElementById("box").style.height="200%";
您的js文件已加载,因此将在按钮加载之前执行。因此,
document.getElementById("Button1")
不会返回该元素,并且您无法将事件侦听器绑定到该元素,因此,单击按钮时,无需执行任何操作。您有两种选择:2.1添加
DOMContentLoaded
listener to the window
或使用jQuery's .ready()
。如果执行此操作,则代码将在每个HTML元素加载后执行,因为浏览器首先下载HTML文件并构建DOM。完成后,您将能够找到您的按钮,并向其添加侦听器。2.2正如其他人所说,在每个HTML元素之后
</body>
标记之前加载您的javascript。由于它是在加载每个元素之后执行的,因此它也将起作用。但是,总的来说,我们在内容之后加载JS文件是为了获得更好的性能,而不是因为我们不想添加窗口加载侦听器。200%可能无法正常工作。我想你想把盒子的高度加倍,对吗?用给定的百分比设置高度并不等于缩放高度。以百分比表示的大小是神奇的,它们与它们的父元素有关,在您的情况下,除您之外,它可能无法正常工作。您应该尝试这样:
var box = document.getElementById("box");
box.style.height = (parseInt(box.style.height) * 2) + "px";