Question

我无法运行简单的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%;

});

感谢您提供的任何帮助！

Answer 1

有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正如其他人所说，在</body>标记之前的每个HTML元素之后加载javascript。由于它在加载每个元素后执行，因此也可以。但是，一般情况下，我们会在内容之后加载JS文件以获得更好的预防性，而不是因为我们不想添加窗口加载侦听器。
200％可能不起作用。我猜你想把盒子的高度翻倍，对吧？使用给定百分比设置高度不等于缩放它。百分比大小是神奇的，它们与父元素相关，在您的情况下，它们可能不像您那样工作。你应该试试这个：
```
var box = document.getElementById("box");
box.style.height = (parseInt(box.style.height) * 2) + "px";
```

Answer 2

将您的脚本添加到正文的末尾

<body>
  ...
  <script src="some.js"></script>
</body>

200％应该是一个字符串（＆＃34; 200％＆＃34;）
```
document.getElementById("box").style.height = "200%";
```

Answer 3

试试这个：

$route

我将代码包装在 DOMContentLoaded 中，因此代码将在（document）页面完全加载后工作。我还对点击功能进行了一些小改动。

将Javascript链接到HTML

3 个答案: