javascript - 将 Javascript 链接到 HTML

<分区>

我在运行简单的 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")不返回元素，你不能给它绑定(bind)一个事件监听器，所以当你点击按钮时，没有什么可做的。您有两个选择:

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";
```

关于javascript - 将 Javascript 链接到 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41654375/

上一篇：javascript - 无法从 native javascript 更改事件更新 vuejs 2 v-model

下一篇：javascript - 过滤 JSON 中的某些值

相关文章：

php - 随机选择动态复选框

javascript - 使用 chrome 扩展程序将自定义按钮添加到 gmail 收件箱

php - 使用 PHP 更改结果的颜色

javascript - 我可以在 Firebase 身份验证中验证电子邮件的域区域吗？

javascript - 使用 JavaScript/jQuery 删除或替换样式表(<link>)

javascript - 当我有一个 slider 时右边的空白

php - 为什么我的login.php 不会重定向我？

javascript - Discord.js javascript 命令处理程序 - 找不到模块错误

javascript - 将页面滚动到移动设备上的元素不起作用但在桌面上是的，preventDefault 是一个问题？

javascript - 播放 html5 的 Audio 对象的多个实例